Kendo DropDownList事件连接到Ajax.BeginForm提交

Question

我在理解如何将事件连接到ajax.begin表单时遇到一些麻烦。

我想要完成的是这个，我有一个下拉列表，其中列出了经销商列表。

基于该经销商，我想加载部分视图。我的模型有一个CurrentReseller字段，包含我需要的所有信息，但我不确定如何根据他们选择的值更改该值。

现在我知道我可以通过常规jQuery来做到这一点，但我对Javascript或JQuery知之甚少知道如何做到这一点。

这是我的cshtml页面的内容

@using (Ajax.BeginForm("RenderPartials", "Admin", new AjaxOptions {
    UpdateTargetId = "SellerWebSettings",
    HttpMethod = "POST",
    InsertionMode = InsertionMode.Replace,
    LoadingElementId = "AjaxLoading",
    LoadingElementDuration = 500
})) {

    Html.Kendo().DropDownListFor(rs => rs.CurrentReseller)
.Name("CurReseller")
.DataTextField("Name")
.DataValueField("Name")
.Events(e => e.Change("OnCurResellerChanged"))//this is event that will ultimately render a new partial, i want this to trigger the "RenderPartials" ajax form.
.DataSource(source => {
    source.Read(read => {
        read.Action("GetResellers", "Admin");
    });
}).OptionLabel("-- Select a Reseller --");

}
<div id="SellerWebSettings"></div>

如何通过Ajax.BeginForm（）告诉“change event”进行ajax表单提交？

Answer 1

  

.Events（e =＆gt; e.Change（“OnCurResellerChanged”））

在这种情况下，只需将表单提交如下所示 -

说我有一个来自下拉列表的模型 -

public class DDLModel
{
    public List<SelectListItem> Items { get; set; }
    public string SelectedValue { get; set; }
}

然后我填充模型并将其发送到View，执行以下操作 -

    public ActionResult Index()
    {
        DDLModel model = new DDLModel();
        model.Items = new List<SelectListItem>();
        model.Items.Add(new SelectListItem() { Text = "1", Value = "1" });
        model.Items.Add(new SelectListItem() { Text = "2", Value = "2" });
        model.Items.Add(new SelectListItem() { Text = "3", Value = "3" });
        return View(model);
    }

我的View包含一个AJAX表单。我们需要为表单提供id，如下所示。

@model MVC.Controllers.DDLModel
@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>

<script>
    function Call() {
        $("#form1").submit();
    }
</script>

@using (Ajax.BeginForm("Submit", "Ajax", new AjaxOptions { UpdateTargetId = "SellerWebSettings" }, new { id = "form1" }))
{
    @Html.DropDownListFor(m => m.SelectedValue, Model.Items, "DDL", new { @onchange = "Call()" })
}

因此，当您更改Dropdownlist值时，将使用jquery提交表单，并使用所选值命中相应的控制器操作。您可以在kendo下拉列表的更改功能中执行以下操作。

输出 -