Data Validation in Partial view mvc 4? - asp.net-mvc

Question

I am working in MVC 4 and totally new to it. I have two Partial views under shared folder and in index method I am using this code to show these partial views:
#Html.Partial("_Login")
#Html.Partial("_Register")
code of _Login partial view:
<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<link href="~/Content/StyleSheet1.css" rel="stylesheet" />
#using (
Ajax.BeginForm(
"Index", "Partial" ,
new AjaxOptions()
{
UpdateTargetId="LoginClass",
HttpMethod="Post"
}
)
)
{
<div class="loginform">
#Html.Label("Name")
<div>#Html.TextBox("Name")</div>
#Html.Label("Password")
<div>#Html.TextBox("password")</div>
</div>
<div>
<input type="submit" value="submit" />
</div>
}
code of LoginClass:
namespace PartialViews.Models
{
public class LoginClass
{
[Required(ErrorMessage="Required")]
public string Name { get; set; }
[Required]
public string Password { get; set; }
}
}
Controller action for Login:
[HttpGet]
public ActionResult Index()
{
var lc = new LoginClass();
return View(lc);
}
[HttpPost]
public string Index(LoginClass lc)
{
return "Email: " + lc.Name + "</br>" +"Password:" + lc.Password;
}
But validations are not working! What I need to do to make validations work.
Need help, Thanks in advance.

Answer 1

Do something like this:
[HttpPost]
public string Index(LoginClass lc)
{
if(ModelState.IsValid)
{
return "Email: " + lc.Name + "</br>" +"Password:" + lc.Password;
}
else
{
return PartialView("yourview",lc);
}
}
and in view:
<div id="formContainer">
#using (
Ajax.BeginForm(
"Index", "Partial" ,
new AjaxOptions()
{
UpdateTargetId="LoginClass",
HttpMethod="Post",
InsertionMode = "Replace"
}
)
)
{
#Html.ValidationSummary(true)
<div class="loginform">
#Html.Label("Name")
<div>#Html.TextBoxFor(x=>x.Name)</div>
<div>#Html.ValidationMessageFor(x=>x.Name)</div>
#Html.Label("Password")
<div>#Html.TextBox(x=>x.password)</div>
<div>#Html.ValidationMessageFor(x-=>x.password)</div>
</div>
<div>
<input type="submit" value="submit" />
</div>
}
</div>
on top of view set model for view like this:
#model LoginClass
Update 2:
Create login form as partial view:
#using (
Ajax.BeginForm(
"Index", "Partial" ,
new AjaxOptions()
{
UpdateTargetId="formContainer",
HttpMethod="Post",
InsertionMode = "Replace"
}
)
)
{
#Html.ValidationSummary(true)
<div class="loginform">
#Html.Label("Name")
<div>#Html.TextBoxFor(x=>x.Name)</div>
<div>#Html.ValidationMessageFor(x=>x.Name)</div>
#Html.Label("Password")
<div>#Html.TextBox(x=>x.password)</div>
<div>#Html.ValidationMessageFor(x-=>x.password)</div>
</div>
<div>
<input type="submit" value="submit" />
</div>
}
Load it in main view inside container div:
<div id="formContainer">
// Load you login form here as partial view
</div>
Now your action:
[HttpPost]
public string Index(LoginClass lc)
{
if(ModelState.IsValid)
{
// do anything here if valid data
}
else
{
// data not valid
return PartialView("partialviewlogin",lc);
}
}