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

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() 进行 ajax 表单提交？

Answer 1

.Events(e => 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);
    }

我的视图包含一个 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 提交表单，并且相应的控制器操作将被选中的值击中。您可以在剑道下拉列表的更改功能中进行以下操作。

输出 -