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
– Ehsan Sajjad, Commented Mar 19, 2014 at 7:55
you can find the solution here: stackoverflow.com/questions/14134949/… — Ashwini Verma
– Ashwini Verma, Commented Mar 19, 2014 at 8:12

Ehsan Sajjad · Accepted Answer · 2014-03-19 11:54:52Z

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

edited Mar 19, 2014 at 11:54

answered Mar 19, 2014 at 8:01

Ehsan Sajjad

62.6k16 gold badges112 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Mogli Over a year ago

and what if i want to show some validation message on the same form, infront of textbox ?

Mogli Over a year ago

+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.

Ehsan Sajjad Over a year ago

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 Over a year ago

@Mogli see the update 2 i hope you will get understanding how to do

Collectives™ on Stack Overflow

Data Validation in Partial view mvc 4?

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related