I use codeplex mvc.grid,i want to bind grid after all dropdownlist selected
My question is SIMPLE :
I m new in mvc development, i have 4 dropboxes and each dropdown triggers next dpdown object to bind values.
How can bind grid using ajaxform.
In case, i want to select first dropdownlist,this action populate second dropdownlist,this action populate next dropdownlist...
Finally when i click to LoadListToGrid button, i dont want REFRESH page,just bind gridview thats all. Why i cant do that in mvc, how can i do that plz tell me
Thanks for your helping
View: (CheckList.cshtml)
@using (Ajax.BeginForm("CheckList", "Check", new AjaxOptions { UpdateTargetId = "Productresult" }))
{`
<div>Dp1</div>
@Html.DropDownList("dpCompany", ViewBag.CompanyList as List<SelectListItem>, new { @class = "btn btn-default dropdown-toggle" })
<div>Dp2</div>
@Html.DropDownList("dpBank", ViewBag.CompanyList as List<SelectListItem>, new { @class = "btn btn-default dropdown-toggle" })
<div>Dp3</div>
@Html.DropDownList("dpStartCheckList", ViewBag.CompanyList as List<SelectListItem>, new { @class = "btn btn-default dropdown-toggle" })
<div>>Dp4</div>
@Html.DropDownList("dpEndCheckList", ViewBag.CompanyList as List<SelectListItem>, new { @class = "btn btn-default dropdown-toggle" })`
<input type="submit" name="CheckList" value="LoadListToGrid" class="btn btn-default" />
@Html.Grid(Model).Columns(columns =>
{
columns.Add(c => c.customer_reference).Titled("Çek No").SetWidth(30);
columns.Add(c => c.unvan).Titled("Ünvan").SetWidth(30);
columns.Add(c => c.vergi_no).Titled("Vergi No").SetWidth(30);
columns.Add(c => c.islem_tarihi).Titled("İşlem Tarihi").SetWidth(30).Format("{0:dd/MM/yyyy}");
columns.Add(c => c.currency).Titled("Para Birimi").SetWidth(30);
columns.Add(c => c.full_curr_amount).Titled("Tutar").SetWidth(30).Format("{0:C}").Css("align-right");
}).WithPaging(10) } // ajax end
Script
$(function () {
// Company
$('#dpCompany').on('change', function () {
var stateDropdown = $('#dpBank');
//disable state drop down
stateDropdown.prop('disabled', 'disabled');
//clear drop down of old states
stateDropdown.empty();
//retrieve selected country
var company = $(this).val();
if (company.length > 0) {
// retrieve data using a Url.Action() to construct url
$.getJSON('@Url.Action("GetBankList")', {
company: company
})
.done(function (data) {
//re-enable state drop down
stateDropdown.removeAttr('disabled');
//for each returned state
$.each(data, function (i, state) {
var values = state.split('|');
//Create new option
var option = $('<option value="' + values[0] + '" />').html(values[1]);
//append state states drop down
stateDropdown.append(option);
});
//if count 1 bind
if ($("#dpBank option").length == 1) {
$("#dpBank").trigger("change");
}
})
.fail(function (jqxhr, textStatus, error) {
var err = textStatus + ", " + error;
console.log("Request Failed: " + err);
});} });
//
$('#dpBank').on('change', function () {
var stateDropdown = $('#dpCheckStart');
//disable state drop down
stateDropdown.prop('disabled', 'disabled');
//clear drop down of old states
stateDropdown.empty();
//retrieve selected country
var bank = $(this).val();
var company = $("#dpCompany").val();
if (company.length > 0) {
// retrieve data using a Url.Action() to construct url
$.getJSON('@Url.Action("GetCheckList")', {
companyCode: company,
bankCode: bank
})
.done(function (data) {
//re-enable state drop down
stateDropdown.removeAttr('disabled');
//for each returned state
$.each(data, function (i, state) {
var values = state.split('|');
//Create new option
var option = $('<option value="' + values[0] + '" />').html(values[1]);
//append state states drop down
stateDropdown.append(option);
});
//if count 1 bind
if ($("#dpBank option").length == 1) {
$("#dpCheckStart").trigger("change");
}
})
.fail(function (jqxhr, textStatus, error) {
var err = textStatus + ", " + error;
console.log("Request Failed: " + err);
}) } });
$('#dpCheckStart').on('change', function () {
var stateDropdown = $('#dpCheckEnd');
//disable state drop down
stateDropdown.prop('disabled', 'disabled');
//clear drop down of old states
stateDropdown.empty();
//retrieve selected country
var startOver = $(this).val();
if (startOver.length > 0) {
// retrieve data using a Url.Action() to construct url
$.getJSON('@Url.Action("GetListOver")', {
startOver: startOver
})
.done(function (data) {
//re-enable state drop down
stateDropdown.removeAttr('disabled');
//for each returned state
$.each(data, function (i, state) {
var values = state.split('|');
//Create new option
var option = $('<option value="' + values[0] + '" />').html(values[1]);
//append state states drop down
stateDropdown.append(option);
})
})
.fail(function (jqxhr, textStatus, error) {
var err = textStatus + ", " + error;
console.log("Request Failed: " + err);
})}});
Controller
public ActionResult CheckList()
{
ViewBag.Message = "";
LoadDefaults();
ViewBag.Loaded = false;
return View();
}
private void LoadDefaults()
{
ViewBag.BaseList = new List<SelectListItem>();
ViewBag.CompanyList = new List<SelectListItem>();
ViewBag.BankList = new List<SelectListItem>();
ViewBag.AmountTotalTable = new Dictionary<string, string>();
}
[Authorize]
public ActionResult CheckList(FormCollection form)
{
ViewBag.Message = "";
ViewBag.StartSelectedItem = StartCheckNo = form["dpStartCheckList"];
ViewBag.EndSelectedItem = EndCheckNo = form["dpEndCheckList"];
F8BaseDB.DbSchema.F8BaseSchema.CheckList chk = new F8BaseDB.DbSchema.F8BaseSchema.CheckList();
LoadDefaults();
return View(chk.GetAll(ViewBag.StartSelectedItem, ViewBag.EndSelectedItem));
}
1)create new partial view which will only render grid i.e
_grid.cshtml
//this is partial view
@Html.Grid(Model).Columns(columns =>
{
columns.Add(c => c.customer_reference).Titled("Çek No").SetWidth(30);
columns.Add(c => c.unvan).Titled("Ünvan").SetWidth(30);
columns.Add(c => c.vergi_no).Titled("Vergi No").SetWidth(30);
columns.Add(c => c.islem_tarihi).Titled("İşlem Tarihi").SetWidth(30).Format("{0:dd/MM/yyyy}");
columns.Add(c => c.currency).Titled("Para Birimi").SetWidth(30);
columns.Add(c => c.full_curr_amount).Titled("Tutar").SetWidth(30).Format("{0:C}").Css("align-right");
}).WithPaging(10) } // ajax end
//partial view end
create method in controller to return that partial view i.e.
public actionResult _grid(pass dropdown values here)
2)In your main view...
<div id='gridTable'></div>
<input type="button" name="CheckList" value="LoadListToGrid" class="btn btn-default" id="loadgrid" />
$('#loadgrid').onclick(function(){
//write ajax call here and specify url as url:'/controllername/_grid'
//in success function write this
success:function(data)
{
$('#gridTable').html(data);
}
});
follow this stape
1)create seperate partial view for grid
2)in ajax call pass dropdown value to partial view and add return html to any Div tag
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.