How to postback on index change of ASP.net MVC dropdownlist?
In this article I am going to discuss how to postback a form on ASP.Net MVC dropdownlist's selected item's index change.
There are options like using AJAX callbacks on selectedIndex change of dropdownlist but sometimes it is needed that you postback the entire form and render it again. Some say that ASP.NET MVC is not built for that kind of architecture as it's main intention is to solve the Search Engine Optimization(SEO) problems. But lets say, there is a genuine need for the implementation of posting back the entire page, process the details on the server side and return back the results. This is what we are going to discuss in this article.
The solution is simple and has taken care of scenario where you have other form elements. All the form elements are encapsulated in a class called CoverObject. List of items in the dropdownlist is all part of this CoverObject.
Steps to create the postback in ASP.Net MVC dropdownlist selectedindex change event:
- Create a controller - Dropdownlist. Paste the code in the section below.
- Create a view of the GetDD action binded to the strongly typed object(CoverObject). Paste the code in the section below.
Code in the controller
using
System;
using
System.Collections.Generic;
using
System.Linq;
using
System.Web;
using
System.Web.Mvc;
using
System.Web.Mvc.Ajax;
namespace
MvcApplication1.Controllers
{
public class CoverObject
{
public IList<SelectListItem> iliSLI;
public string
SelectedName { get; set;
}
public string
Name { get; set;
}
public string
Address { get; set;
}
public string
formAction { get; set;
}
public CoverObject()
{
iliSLI = new
List<SelectListItem>();
SelectListItem sli =
new SelectListItem();
sli.Text = "Altaf";
sli.Value = "1";
iliSLI.Add(sli);
sli = new
SelectListItem();
sli.Text = "Krish";
sli.Value = "22";
iliSLI.Add(sli);
sli = new
SelectListItem();
sli.Text = "Sameer";
sli.Value = "3333";
iliSLI.Add(sli);
sli = new
SelectListItem();
sli.Text = "Iqbal";
sli.Value = "44444";
iliSLI.Add(sli);
sli = new
SelectListItem();
sli.Text = "Maimoona";
sli.Value = "5555";
iliSLI.Add(sli);
}
}
public class DropdownlistController :
Controller
{
//
// GET: /Dropdownlist/
public ActionResult
Index()
{
return View();
}
public ActionResult
GetDD()
{
CoverObject co =
new CoverObject();
co.formAction = "";
//ViewData["SecretQuestion"] = co.iliSLI;
return View(co);
}
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult
GetDD(CoverObject co)
{
CoverObject coNew =
new CoverObject();
string indexChangedValue =
co.SelectedName;
var item = from
it in coNew.iliSLI
where it.Value == co.SelectedName
select it;
item.First().Selected = true;
coNew.Name = item.First().Text;
coNew.Address = co.Address;
if (!string.IsNullOrEmpty(co.formAction)
&& co.formAction.Equals("Submit Form By Clicking"))
{
// Based on the main submit of the form, it can
process and redirect or stay on the same view.
ModelState.AddModelError("_FORM",
"Form Submitted by clicking submit button");
}
else//Submitted
by dropdownlist index change event
{
//DROPDOWNLIST on selectedIndexChangedEvent
Handled hereModelState.AddModelError("_FORM", "Form Submitted by clicking submit
button");
ModelState.AddModelError("iliSLI",
"Form Submitted by selected Index Change event");
}
return View(coNew);
}
}
}
Code in the aspx file
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<MvcApplication1.Controllers.CoverObject>" %>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>GetDD</title>
<style>
.validation-summary-errors
{
font-weight: bold;
color: #0000ff;
}
</style>
</head>
<body>
<%= Html.ValidationSummary("Form submitted by what event notification:")
%>
<% using (Html.BeginForm()) {%>
<fieldset>
<legend>Fields</legend>
<p>
<label for="Address">Address:</label>
<%= Html.TextBox("co.Address",
Model.Address)%>
<%= Html.ValidationMessage("Address", "*")
%>
</p>
<p>
<label for="Address">Please
select Name:</label>
<%= Html.DropDownList("co.SelectedName",
Model.iliSLI, new { onChange =
"onSelectedIndexChanged()" })%>
<%= Html.ValidationMessage("iliSLI", "*")
%>
</p>
<p>
<label for="Name">Selected
Name:</label>
<%= Html.TextBox("Name",
Model.Name, new { disabled="true" })%>
<%= Html.ValidationMessage("Name", "*")
%>
</p>
<p>
<input type="submit" value="Submit Form By
Clicking" name="co.formAction"/>
</p>
</fieldset>
<% }
%>
<script type="text/javascript">
function onSelectedIndexChanged() {
var sub = document.getElementsByName("co.formAction");
sub.value = "";
document.forms[0].submit();
}
</script>
</body>
</html>