jquery - MVC 4 Ajax.BeginForm binding grid -
i use codeplex mvc.grid,i want bind grid after dropdownlist selected
my question simple :
i m new in mvc development, have 4 dropboxes , each dropdown triggers next dpdown object bind values.
how can bind grid using ajaxform.
in case, want select first dropdownlist,this action populate second dropdownlist,this action populate next dropdownlist...
finally when click loadlisttogrid button, dont want refresh page,just bind gridview thats all. why cant in mvc, how can plz tell me
thanks helping
view: (checklist.cshtml)
@using (ajax.beginform("checklist", "check", new ajaxoptions { updatetargetid = "productresult" })) {` <div>dp1</div> @html.dropdownlist("dpcompany", viewbag.companylist list<selectlistitem>, new { @class = "btn btn-default dropdown-toggle" }) <div>dp2</div> @html.dropdownlist("dpbank", viewbag.companylist list<selectlistitem>, new { @class = "btn btn-default dropdown-toggle" }) <div>dp3</div> @html.dropdownlist("dpstartchecklist", viewbag.companylist list<selectlistitem>, new { @class = "btn btn-default dropdown-toggle" }) <div>>dp4</div> @html.dropdownlist("dpendchecklist", viewbag.companylist 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 url.action() 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 url.action() 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 url.action() 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 render grid i.e _grid.cshtml //this 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 return partial view i.e. public actionresult _grid(pass dropdown values here) 2)in 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 , specify url url:'/controllername/_grid' //in success function write success:function(data) { $('#gridtable').html(data); } }); follow stape 1)create seperate partial view grid 2)in ajax call pass dropdown value partial view , add return html div tag 
Comments
Post a Comment