Kendo DropDownList event wired to Ajax.BeginForm submit

Question

I am having a little trouble understanding how to wire up an event to the ajax.begin form.

What i'm trying to accomplish is this, i have a drop down list that pulls a list of Resellers.

Based on that reseller i want to load a partial view. My model has a field of CurrentReseller with all the information i need, but i'm not sure how to make that value change based on what they choose.

Now i know i can do this through regular jQuery, but i don't know enough about Javascript or JQuery to know how to even do this.

Here's what i have for my cshtml page

@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>

How do i tell the "change event" to do the ajax form submission with Ajax.BeginForm()?

Answer 1

.Events(e => e.Change("OnCurResellerChanged"))

In that event simply make the form submit like shown below -

Say I have a model fro dropdownlist -

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

Then I populate the model and send it to View in the following action -

    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);
    }

And my View comprises of a AJAX form. We need to give an id to the form as shown below.

@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()" })
}

So when you change the Dropdownlist value, form will be submitted using jquery and corresponding controller action will be hit with the selected value. You can do the following in the change function of kendo dropdownlist.

Output -