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.

and check as well, have to included, unobtrusive ajax js file and unobtrusive validate js file in your master layout? — Ehsan Sajjad, Mar 19 '14 at 07:55
you can find the solution here: http://stackoverflow.com/questions/14134949/jquery-client-side-validation-not-working-in-mvc3-partial-view — Ashwini Verma, Mar 19 '14 at 08:12

Ehsan Sajjad · Answer 1 · 2014-03-19T11:54:52.167

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

and what if i want to show some validation message on the same form, infront of textbox ? — Mogli, Mar 19 '14 at 08:05
+1 for this much, but my problem is not solved yet, you are using return PartialView("yourview",lc); which redirect user to the different page, on login view only, but in my case i want the user to stay on the same page. — Mogli, Mar 19 '14 at 11:23
if you want validation fired and you have to check in action if model is valid, if not valid you have to return for back as a partial view with model passed, and then it will work, i update the answer for making it more understandable — Ehsan Sajjad, Mar 19 '14 at 11:44
@Mogli see the update 2 i hope you will get understanding how to do — Ehsan Sajjad, Mar 19 '14 at 12:07

Data Validation in Partial view mvc 4?

1 Answers1