MVC 4 Ajax.BeginForm 绑定网格

Posted 2023-05-08

【中文标题】MVC 4 Ajax.BeginForm 绑定网格

【英文标题】：MVC 4 Ajax.BeginForm binding grid

【发布时间】：2015-01-16 20:39:05

【问题描述】：

我使用 codeplex mvc.grid，我想在选择所有下拉列表后绑定网格

我的问题很简单：

我是 mvc 开发的新手，我有 4 个下拉框，每个下拉框都会触发下一个 dpdown 对象来绑定值。

如何使用 ajaxform 绑定网格。

如果我想选择第一个下拉列表，此操作填充第二个下拉列表，此操作填充下一个下拉列表...

最后，当我单击 LoadListToGrid 按钮时，我不想刷新页面，只需绑定 gridview 即可。 为什么我不能在 mvc 中做到这一点，我该怎么做，请告诉我

感谢您的帮助

---

查看：(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

脚本

$(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);
));

控制器

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】：

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