Jquery MVC 4 Ajax.1绑定网格

我使用codeplex mvc.grid，我想在选择所有dropdownlist之后绑定网格

我的问题很简单：

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

如何使用ajaxform绑定网格

在这种情况下，我想选择第一个dropdownlist，此操作填充第二个dropdownlist，此操作填充下一个dropdownlist

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

谢谢你的帮助

---

视图：（CheckList.cshtml）

@使用（Ajax.BeginForm（“检查表”、“检查表”、新的AjaxOptions{UpdateTargetId=“Productresult”}））
{`
Dp1
@Html.DropDownList（“dpCompany”，ViewBag.CompanyList作为列表，新的{@class=“btn btn default dropdown toggle”}）
Dp2
@Html.DropDownList（“dpBank”，ViewBag.CompanyList作为列表，新的{@class=“btn btn default dropdown toggle”}）
Dp3
@DropDownList（“dpStartCheckList”，ViewBag.CompanyList作为列表，新的{@class=“btn btn default dropdown toggle”}）
>Dp4
@Html.DropDownList（“dpEndCheckList”，ViewBag.CompanyList作为列表，新建{@class=“btn btn default dropdown toggle”}）`
@Html.Grid（Model）.Columns（Columns=>
{
列。添加（c=>c.customer_参考）。标题为（“切克编号”）。设置宽度（30）；
列。添加（c=>c.unvan）。标题为（“Ünvan”）。设置宽度（30）；
列。添加（c=>c.vergi_编号）。标题为（“vergi编号”）。设置宽度（30）；
columns.Add（c=>c.islem_tarihi）.title（“lem tarihi”）.SetWidth（30）.Format（“{0:dd/MM/yyyy}”）；
列。添加（c=>c.currency）。标题为（“Para Birimi”）。设置宽度（30）；
columns.Add（c=>c.full\u curr\u amount）.Titled（“Tutar”）.SetWidth（30）.Format（“{0:c}”）.Css（“向右对齐”）；
}).WithPaging（10）}//ajax结束

剧本

$（函数（）{
//公司
$（'dpCompany'）。关于（'change'，函数（）{
var stateDropdown=$（“#dpBank”）；
//禁用状态下拉列表
stateDropdown.prop（'disabled'，'disabled'）；
//旧州的清退
stateDropdown.empty（）；
//检索所选国家/地区
var company=$（this.val（）；
如果（公司长度>0）{
//使用Url.Action（）来构造Url来检索数据
$.getJSON（'@Url.Action（“GetBankList”）{
公司:公司
})
.完成（功能（数据）{
//重新启用状态下拉列表
stateDropdown.removeAttr（'disabled'）；
//对于每个返回的状态
$。每个（数据、函数（i、状态）{
var值=state.split（“|”）；
//创建新选项
var option=$（''）.html（值[1]）；
//附加状态下拉列表
stateDropdown.append（选项）；
});
//如果计数1绑定
如果（$（“#dpBank选项”）。长度==1）{
美元（“#dpBank”）。触发（“变更”）；
}
})
.fail（函数（jqxhr、textStatus、error）{
var err=textStatus+“，”+错误；
log（“请求失败：+err”）；
});} });
//
$（'dpBank'）。关于（'change'，函数（）{
var stateDropdown=$（“#dpCheckStart”）；
//禁用状态下拉列表
stateDropdown.prop（'disabled'，'disabled'）；
//旧州的清退
stateDropdown.empty（）；
//检索所选国家/地区
var bank=$（this.val（）；
var company=$（“#dpCompany”）.val（）；
如果（公司长度>0）{
//使用Url.Action（）来构造Url来检索数据
$.getJSON（'@Url.Action（“GetCheckList”）{
公司代码：公司，
银行代码：bank
})
.完成（功能（数据）{
//重新启用状态下拉列表
stateDropdown.removeAttr（'disabled'）；
//对于每个返回的状态
$。每个（数据、函数（i、状态）{
var值=state.split（“|”）；
//创建新选项
var option=$（''）.html（值[1]）；
//附加状态下拉列表
stateDropdown.append（选项）；
});
//如果计数1绑定
如果（$（“#dpBank选项”）。长度==1）{
$（“#dpCheckStart”）。触发器（“更改”）；
}
})
.fail（函数（jqxhr、textStatus、error）{
var err=textStatus+“，”+错误；
log（“请求失败：+err”）；
}) } });
$（'dpCheckStart'）。在（'change'，函数（）{
var stateDropdown=$（'dpCheckEnd'）；
//禁用状态下拉列表
stateDropdown.prop（'disabled'，'disabled'）；
//旧州的清退
stateDropdown.empty（）；
//检索所选国家/地区
var startOver=$（this.val（）；
如果（起始长度>0）{
//使用Url.Action（）来构造Url来检索数据
$.getJSON（“@Url.Action（“GetListOver”）”{
startOver：startOver
})
.完成（功能（数据）{
//重新启用状态下拉列表
stateDropdown.removeAttr（'disabled'）；
//对于每个返回的状态
$。每个（数据、函数（i、状态）{
var值=state.split（“|”）；
//创建新选项
var option=$（''）.html（值[1]）；
//附加状态下拉列表
stateDropdown.append（选项）；
})
})
.fail（函数（jqxhr、textStatus、error）{
var err=textStatus+“，”+错误；
log（“请求失败：+err”）；
})}});

控制器

公共行动结果清单（）
{
ViewBag.Message=“”；
LoadDefaults（）；
ViewBag.Loaded=false；
返回视图（）；
}
私有void LoadDefaults（）
{
视窗袋。底座
@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)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