i have been working on asp.net MVC ,unable to fire on change event in dropdownlistbox

Question

I have created a controller by name AdmissionControlller there I have added two ActionResult functions: Create and Post Event

// POST: /Admission/Create
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Create(FormCollection collection)
{
    try
    {
        // TODO: Add insert logic here
        return RedirectToAction("Index",collection);
    }
    catch
    {
        return View();
    }
}

 //Return the List of Subject For the Class Selected 
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Details(string className)
{
    var subject = SubjectsModel.SelectSubjectsByClass(className);
    return PartialView("EntranceMarks", subject);
}

now in the view page

Create Page

<h2>
    Create</h2>
<% using (Html.BeginForm())
{%>
<%= Html.ValidationSummary(true) %>
<fieldset>
    <legend>Fields</legend>
    <div class="editor-label">
        <%= Html.LabelFor(model => model.Id) %>
    </div>
    <div class="editor-field">
        <%= Html.TextBoxFor(model => model.Id) %>
        <%= Html.ValidationMessageFor(model => model.Id) %>
    </div>
    <div class="editor-label">
        <%= Html.LabelFor(model => model.PlNo) %>
    </div>
    <div class="editor-field">
        <%= Html.TextBoxFor(model => model.PlNo) %>
        <%= Html.ValidationMessageFor(model => model.PlNo) %>
    </div>
    <div class="editor-label">
        <%= Html.LabelFor(model => model.AdmissionNo) %>
    </div>
    <div class="editor-field">
        <%= Html.TextBoxFor(model => model.AdmissionNo) %>
        <%= Html.ValidationMessageFor(model => model.AdmissionNo) %>
    </div>
    <div class="editor-label">
        <%= Html.LabelFor(model => model.AdmissionDate) %>
    </div>
    <div class="editor-field">
        <%= Html.TextBoxFor(model => model.AdmissionDate) %>
        <%= Html.ValidationMessageFor(model => model.AdmissionDate) %>
    </div>
    <div class="editor-label">
        <%= Html.LabelFor(model => model.FirstName) %>
    </div>
    <div class="editor-field">
        <%= Html.TextBoxFor(model => model.FirstName) %>
        <%= Html.ValidationMessageFor(model => model.FirstName) %>
    </div>
    <div class="editor-label">
        <%= Html.LabelFor(model => model.MiddleName) %>
    </div>
    <div class="editor-field">
        <%= Html.TextBoxFor(model => model.MiddleName) %>
        <%= Html.ValidationMessageFor(model => model.MiddleName) %>
    </div>
    <div class="editor-label">
        <%= Html.LabelFor(model => model.LastName) %>
    </div>
    <div class="editor-field">
        <%= Html.TextBoxFor(model => model.LastName) %>
        <%= Html.ValidationMessageFor(model => model.LastName) %>
    </div>
    <div class="editor-label">
        <%= Html.LabelFor(model => model.Class) %>
    </div>
    <%using (Ajax.BeginForm("Details", new AjaxOptions { 
                    UpdateTargetId = "EntranceMarks" }))
    { %>
    <div class="editor-field">
        <%=Html.DropDownList("StudentClass")%>
    </div>
    <div class="editor-label">
        <%= Html.LabelFor(model => model.Section) %>
    </div>
    <div class="editor-field">
        <%=Html.DropDownList("Section")%>
    </div>
    <div class="editor-label" id="EntranceMarks">
    </div>
    <%} %>      
    <p>
        <input type="submit" value="Create" />
    </p>
</fieldset>
<% } %>
<div>
    <%= Html.ActionLink("Back to List", "Index") %>
</div

Now when I change the dropdownlist box for class I am unable to fire the event??

Answer 1

You need to include the onchange handle when creating your dropdownlist. The ChangeClass() method referred to below is the name of a javascript function which you need to create.

<%=Html.DropDownList("StudentClass", new {onchange="ChangeClass()"})%>

You alternatively use Jquery and bind the onchange event to the dropdown list you are interested in.

$("#StudentClass").change(function() {
 // your logic goes here
 // if you need to populate some other part of the form
 // this method will probably have some ajax call to a specified
 // controller action which return your data.
});

Now if you mean that you want the form to be submitted when you change the drop down, this can be achieved with

<%=Html.DropDownList("StudentClass", new {onchange="this.form.submit()"})%>