Data Validation in Partial view mvc 4?

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