OnChange Event of Dropdown code in JQuery:-
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
$(document).ready(function () {
$(".Main1").show();
$(".Main2").hide();
});
$(document).ready(function () {
$('#AddressList').change(function (e) {
$(".Main1").hide();
$(".Main2").show();
var url = '@Url.Action("BindCompleteAddressDetailsbyAddressId")';
$.get(url, { AddressId: $(this).val() }, function (result) {
$('#MainData').children().remove();
$('#output').html(result);
});
});
});
In the View:-
<div id="divData">
<table>
<tr>
<td>
<table>
<tr>
<td>
@Html.Label("Form Category", "Please select Category", htmlAttributes: new { @class = "tdLabel" })
</td>
<td>
@Html.DropDownList("AddressList", ViewBag.AddressTypes as SelectList, "----- Select Category -----")
</td>
<td>
@{
string message = TempData["Message"] as string;
if (TempData["Error"] != null)
{
<div class="red">
<p style="color:red;font-size:12px; font-family:Calibri;"><strong style="color:red;font-size:12px; font-family:Calibri;">Error:</strong> @TempData["Error"].ToString()</p>
</div>
}
if (TempData["Success"] != null)
{
<div class="green">
<p style="color:blue;font-size:12px; font-family:Calibri;"><strong style="color:blue;font-size:12px; font-family:Calibri;">Success:</strong> @TempData["Success"].ToString()</p>
</div>
}
}
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<div id="MainData" class="Main1">
@{
var grid = new System.Web.Helpers.WebGrid
(
source: Model,
canPage: true,
rowsPerPage: 10
);
grid.Pager(WebGridPagerModes.NextPrevious);
grid.SortDirection = SortDirection.Ascending;
}
@grid.GetHtml(
tableStyle: "webgrid-table",
headerStyle: "webgrid",
footerStyle: "webgrid-footer",
alternatingRowStyle: "webgrid-alternating-row",
rowStyle: "webgrid-row-style",
columns:
grid.Columns
(
grid.Column(columnName: "CompletedFormId", header: "CompletedFormId", canSort: true, style: "col-sm"),
grid.Column("FormName", "FormName", format: (i) => @Html.Raw("<span title='" + i.FormDescription + "'>" + i.FormName + "</span>")),
grid.Column("Address1", "Address1"),
grid.Column("Address2", "Address2"),
grid.Column("Place", "Place"),
grid.Column("City", "City"),
grid.Column("State", "State"),
grid.Column("PostCode", "PostCode"),
grid.Column("CountryName", "CountryName"),
grid.Column("UserLogin", "UserLogin"),
)
)
</div>
</td>
</tr>
<tr>
<td>
<div id="output" class="Main2">
@Html.Partial("BindCompleteFormDetasilByCategoryId", Model)
</div>
</td>
</tr>
</table>
In C# Code :-
public ActionResult BindCompleteAddressDetailsbyAddressId(int AddressId)
{
var AddressReporsitory = new
();
AddressReporsitory
var AddressForms = new List<
>();
AddressForms
using (var db = new AddressContext())
{
AddressForms
AddressReporsitory
}
return PartialView("BindCompleteFormDetasilByCategoryId", AddressForms);
}
}
BindCompleteAddressDetailsbyAddressId -- This is partial view which i have created Then we have to add the same grid code in that Partial form.
Please find the Grid code in partial view (
BindCompleteAddressDetailsbyAddressId )
<table>
<tr>
<td align="left" style="vertical-align:top;">
<div id="divgrid">
@{
var grid = new System.Web.Helpers.WebGrid
(
source: Model,
canPage: true,
rowsPerPage: 10
);
grid.Pager(WebGridPagerModes.NextPrevious);
grid.SortDirection = SortDirection.Ascending;
}
@grid.GetHtml(
tableStyle: "webgrid-table",
headerStyle: "webgrid",
footerStyle: "webgrid-footer",
alternatingRowStyle: "webgrid-alternating-row",
rowStyle: "webgrid-row-style",
columns:
grid.Columns
(
grid.Column(columnName: "CompletedFormId", header: "CompletedFormId", canSort: true, style: "col-sm"),
grid.Column("FormName", "FormName", format: (i) => @Html.Raw("<span title='" + i.FormDescription + "'>" + i.FormName + "</span>")),
grid.Column("Address1", "Address1"),
grid.Column("Address2", "Address2"),
grid.Column("Place", "Place"),
grid.Column("City", "City"),
grid.Column("State", "State"),
grid.Column("PostCode", "PostCode"),
grid.Column("CountryName", "CountryName"),
grid.Column("UserLogin", "UserLogin"),
)
)
</div>
</td>
</tr>
</table>
No comments:
Post a Comment