Everything about Html.Action And Html.RenderAction In ASP.NET MVC

CheapASPNETHostingReview.com | Best and cheap ASP.NET MVC 6 hosting. This article introduces both @Html.Action and @Html.RenderAction. These are used to call a partial view in another view by action method. As we have other options such as @Html.Partial and @Html.RenderPartial to call a partial view in other views then why do we use @Html.Action and @Html.RenderAction ? We use these two html helper methods in the following scenarios.

To call partial view in another view.
Partial view is independent to corresponding view in other words partial view model in not related to corresponding view model in strongly typed views.
We need some operations over data of partial view before it render in corresponding view.
We call a partial view from ChildActionOnly action methods in another view by GET request.

Whenever we got above situation in our application then we prefer to use these Html helper methods. Now let’s have a look on summery information of these Html helper methods.

@Html.Action

This Html.Action renders partial view as an HTML string so we can store it in another string variable. It is string return type method so first it returns result as a string then renders result to response.

@Html.RenderAction

This is also same as Html.Action but main difference is that it renders result directly to response that’s why it is more efficient if the action returns a large amount of HTML over @Html.Action.

Now we will have a look on particle implementation of these two.

Using Code

We create an MVC application which has a view for employee login and employee registration as both employee login and employee registration are independent to each other. To combine these on single view, we create two partial views, one for Employee login and another for employee registration. As these two views are also independent to corresponding views in which these call.

First of all we create two view models one for Employee Login (EmployeeLoginViewModel) and another for Employee Registration (EmployeeViewModel). The following code snippet shows both.

namespace EFOperation.Models  
{  
    public class EmployeeLoginViewModel  
    {  
        public string Email { get; set; }  
        public string Password { get; set; }  
    }  
}  
  
using System.ComponentModel.DataAnnotations;  
  
namespace EFOperation.Models  
{  
    public class EmployeeViewModel  
    {  
        public string Name { get; set; }  
        public string Email { get; set; }  
        public string Password { get; set; }  
        [Display(Name="Confirm Password")]  
        public string ConfirmPassword { get; set; }  
    }  
}

namespace EFOperation.Models

{

public class EmployeeLoginViewModel

{

public string Email { get; set; }

public string Password { get; set; }

}

using System.ComponentModel.DataAnnotations;

namespace EFOperation.Models

{

public class EmployeeViewModel

{

public string Name { get; set; }

public string Email { get; set; }

public string Password { get; set; }

[Display(Name="Confirm Password")]

public string ConfirmPassword { get; set; }

}

As per figure 1, we create an Index view which has both employee login and employee registration partial view so we define a controller that has three action methods. The “Index” action method returns main view and other two child action methods “EmployeeLogin” and “EmployeeRegistration”. The following code snippet shows EmployeeController.

using EFOperation.Models;  
using System.Web.Mvc;  
  
namespace EFOperation.Controllers  
{  
    public class EmployeeController : Controller  
    {  
         
        public ActionResult Index()  
        {  
            return View("Index");  
        }  
  
        [ChildActionOnly]  
        public ActionResult EmployeeLogin()  
        {  
            EmployeeLoginViewModel model = new EmployeeLoginViewModel();  
            return PartialView("_EmployeeLogin",model);  
        }  
        [ChildActionOnly]  
        public ActionResult EmployeeRegistration()  
        {  
            EmployeeViewModel model = new EmployeeViewModel();  
            return PartialView("_EmployeeRegistration",model);  
        }  
    }  
}

using EFOperation.Models;

using System.Web.Mvc;

namespace EFOperation.Controllers

{

public class EmployeeController : Controller

{

public ActionResult Index()

{

return View("Index");

}

[ChildActionOnly]

public ActionResult EmployeeLogin()

{

EmployeeLoginViewModel model = new EmployeeLoginViewModel();

return PartialView("_EmployeeLogin",model);

}

[ChildActionOnly]

public ActionResult EmployeeRegistration()

{

EmployeeViewModel model = new EmployeeViewModel();

return PartialView("_EmployeeRegistration",model);

}

In our example, the Index view is nota strongly typed view. If it is strongly typed then it doesn’t have any impact on partial view model because with help of @Html.Action and @Html.RenderAction, we can use independent models in partial views. Now have a look that how partial views are called in corresponding view. The following code snippet for Employee Login partial view.

Get ASPHostPortal 15% discount with this promotional link

@model EFOperation.Models.EmployeeLoginViewModel  
  
&lt;section id="loginForm"&gt;  
    @using (Html.BeginForm("EmployeeLogin", "Employee", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { @class = "form-horizontal", role = "form" }))  
    {  
        @Html.AntiForgeryToken()  
        &lt;h4&gt;Use a local account to log in.&lt;/h4&gt;  
        &lt;hr /&gt;  
        &lt;div class="form-group"&gt;  
            @Html.LabelFor(m =&gt; m.Email, new { @class = "col-md-2 control-label" })  
            &lt;div class="col-md-10"&gt;  
                @Html.TextBoxFor(m =&gt; m.Email, new { @class = "form-control" })  
            &lt;/div&gt;  
        &lt;/div&gt;  
        &lt;div class="form-group"&gt;  
            @Html.LabelFor(m =&gt; m.Password, new { @class = "col-md-2 control-label" })  
            &lt;div class="col-md-10"&gt;  
                @Html.PasswordFor(m =&gt; m.Password, new { @class = "form-control" })  
                @Html.ValidationMessageFor(m =&gt; m.Password)  
            &lt;/div&gt;  
        &lt;/div&gt;  
        &lt;div class="form-group"&gt;  
            &lt;div class="col-md-offset-2 col-md-10"&gt;  
                &lt;input type="submit" value="Log in" class="btn btn-default" /&gt;  
            &lt;/div&gt;  
        &lt;/div&gt;          
    }  
&lt;/section&gt;

@model EFOperation.Models.EmployeeLoginViewModel

@using (Html.BeginForm("EmployeeLogin", "Employee", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { @class = "form-horizontal", role = "form" }))

{

@Html.AntiForgeryToken()

<h4>Use a local account to log in.</h4>

<hr />

@Html.LabelFor(m => m.Email, new { @class = "col-md-2 control-label" })

@Html.TextBoxFor(m => m.Email, new { @class = "form-control" })

</div>

@Html.LabelFor(m => m.Password, new { @class = "col-md-2 control-label" })

@Html.PasswordFor(m => m.Password, new { @class = "form-control" })

@Html.ValidationMessageFor(m => m.Password)

</div>

</div>

}

</section>

The following code snippet for Employee registration view.

@model EFOperation.Models.EmployeeViewModel  
  
@using (Html.BeginForm("EmployeeRegistration", "Employee", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))  
{     
    &lt;h4&gt;Create a new account.&lt;/h4&gt;  
    &lt;hr /&gt;  
     
    &lt;div class="form-group"&gt;  
        @Html.LabelFor(m =&gt; m.Name, new { @class = "col-md-2 control-label" })  
        &lt;div class="col-md-10"&gt;  
            @Html.TextBoxFor(m =&gt; m.Name, new { @class = "form-control" })  
        &lt;/div&gt;  
    &lt;/div&gt;  
    &lt;div class="form-group"&gt;  
        @Html.LabelFor(m =&gt; m.Email, new { @class = "col-md-2 control-label" })  
        &lt;div class="col-md-10"&gt;  
            @Html.TextBoxFor(m =&gt; m.Email, new { @class = "form-control" })  
        &lt;/div&gt;  
    &lt;/div&gt;  
    &lt;div class="form-group"&gt;  
        @Html.LabelFor(m =&gt; m.Password, new { @class = "col-md-2 control-label" })  
        &lt;div class="col-md-10"&gt;  
            @Html.PasswordFor(m =&gt; m.Password, new { @class = "form-control" })  
        &lt;/div&gt;  
    &lt;/div&gt;  
    &lt;div class="form-group"&gt;  
        @Html.LabelFor(m =&gt; m.ConfirmPassword, new { @class = "col-md-2 control-label" })  
        &lt;div class="col-md-10"&gt;  
            @Html.PasswordFor(m =&gt; m.ConfirmPassword, new { @class = "form-control" })  
        &lt;/div&gt;  
    &lt;/div&gt;  
    &lt;div class="form-group"&gt;  
        &lt;div class="col-md-offset-2 col-md-10"&gt;  
            &lt;input type="submit" class="btn btn-default" value="Register" /&gt;  
        &lt;/div&gt;  
    &lt;/div&gt;  
}

@model EFOperation.Models.EmployeeViewModel

@using (Html.BeginForm("EmployeeRegistration", "Employee", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))

{

<h4>Create a new account.</h4>

<hr />

@Html.LabelFor(m => m.Name, new { @class = "col-md-2 control-label" })

@Html.TextBoxFor(m => m.Name, new { @class = "form-control" })

</div>

@Html.LabelFor(m => m.Email, new { @class = "col-md-2 control-label" })

@Html.TextBoxFor(m => m.Email, new { @class = "form-control" })

</div>

@Html.LabelFor(m => m.Password, new { @class = "col-md-2 control-label" })

@Html.PasswordFor(m => m.Password, new { @class = "form-control" })

</div>

@Html.LabelFor(m => m.ConfirmPassword, new { @class = "col-md-2 control-label" })

@Html.PasswordFor(m => m.ConfirmPassword, new { @class = "form-control" })

</div>

</div>

}

Now we call both partial views with help of @Html.Action and @Html.RenderAction in main index view. The following code snippet is for the same.

@{  
    ViewBag.Title = "Index";  
}  
  
&lt;div class="row"&gt;  
  
    &lt;div class="col-lg-6"&gt;  
        @Html.Action("EmployeeLogin")  
    &lt;/div&gt;  
    &lt;div class="col-lg-6"&gt;  
        @{Html.RenderAction("EmployeeRegistration");}  
    &lt;/div&gt;  
   
&lt;/div&gt;

ViewBag.Title = "Index";

}

@Html.Action("EmployeeLogin")

</div>

@{Html.RenderAction("EmployeeRegistration");}

</div>

Now run the application and we get the same result as figure 2.

Using manually the ASP.NET MVC’s client side validation infrastructure

CheapASPNETHostingReview.com | Best and cheap ASP.NET MVC hosting. ASP.NET MVC client side validation is based on the jQuery validation plugin. It can be said that MVC’s client-side validation is an opinionated version of how jQuery validation should work in an ASP.NET MVC project. Despite this, the underlying implementation is fully based on jQuery’s. In this blog post I’ll show you how you can take advantage of this.

ASP.NET MVC Client Side validation requirements

First, here’s the list of things you need to do to enable client-side validation in an ASP.NET MVC project Make sure your client side code is loading both:

jquery.validate.js
jquery.validate.unobtrusive.js

Make sure your web.config has the following keys in appSettings with the follwoing values:

&lt;appSettings&gt;
    ...
    &lt;add key="ClientValidationEnabled" value="true" /&gt;
    &lt;add key="UnobtrusiveJavaScriptEnabled" value="true" /&gt;
  &lt;/appSettings&gt;

...

</appSettings>

These settings can be overridden in a controller, make sure that is not happening. For example this would turn off client side validation if executed inside a controller’s action:

public ActionResult Index()
{
    HtmlHelper.ClientValidationEnabled = false;    
    return View();
}

public ActionResult Index()

{

HtmlHelper.ClientValidationEnabled = false;

return View();

}

The next requirement is that you use attributes from System.ComponentModel.DataAnnotations in the Model class that is used in view where you want client-side validation enabled.

For example, if we want the Email field to be a valid email, and make the password and email fields required we would create a model like this:

using System.ComponentModel.DataAnnotations; 

public class LoginViewModel
{
    [Required]        
    [EmailAddress]
    public string Email { get; set; }

    [Required]                
    public string Password { get; set; }            
}

using System.ComponentModel.DataAnnotations;

public class LoginViewModel

{

[Required]

[EmailAddress]

public string Email { get; set; }

[Required]

public string Password { get; set; }

}

Finally, we have to use the HtmlHelpers that generate the correct markup for all of this to work, and they have to be inside a form, for example

@model LoginViewModel

&lt;form&gt;
    @Html.LabelFor(m =&gt; m.Email)
    @Html.TextBoxFor(m =&gt; m.Email)
    @Html.ValidationMessageFor(m =&gt; m.Email)

    @Html.LabelFor(m =&gt; m.Password)
    @Html.PasswordFor(m =&gt; m.Password)
    @Html.ValidationMessageFor(m =&gt; m.Password)
&lt;/form&gt;

@model LoginViewModel

<form>

@Html.LabelFor(m => m.Email)

@Html.TextBoxFor(m => m.Email)

@Html.ValidationMessageFor(m => m.Email)

@Html.LabelFor(m => m.Password)

@Html.PasswordFor(m => m.Password)

@Html.ValidationMessageFor(m => m.Password)

</form>

Getting away with using Client Side validation without a model

The last two requirements are actually optional. It is possible to take advantage of client side validation without having to create a model class and annotate it, which can be useful if you only use a couple of parameters (such as in the Login example).

If you inspect the markup that the helpers generate you’ll see that it’s actually pretty simple:

&lt;input type="text" name="email" data-val="true" data-val-required="The email is required"/&gt;
&lt;span class="field-validation-valid" data-valmsg-for="email" data-valmsg-replace="true"&gt;&lt;/span&gt;

1 2	<input type="text" name="email" data-val="true" data-val-required="The email is required"/> <span class="field-validation-valid" data-valmsg-for="email" data-valmsg-replace="true"></span>

It turns out that to enable client side validation without using the HtmlHelpers and a model you just have to add an input with data-val="true" and then data-val- followed by validation method that you want to apply (e.g. data-val-required), the value of which will be the error message presented to the user (e.g. data-val-required="This is the error message"). This works because the MVC’s “unobtrusive validation” works by looking for inputs that are annotated with data-val attributes.

The data-valmsg-for‘s value is the name (not the id) of the input it refers to, and data-valmsg-replace="true" just means that the default message should be replaced, for example you could have a default message for the email field:

&lt;span class="field-validation-valid" data-valmsg-for="email" data-valmsg-replace="true"&gt;The email must be unique&lt;/span&gt;

1	<span class="field-validation-valid" data-valmsg-for="email" data-valmsg-replace="true">The email must be unique</span>

This message would then be replaced by any validation error that occurs in the email field, for example “The email is required”. If data-valmsg-replace="false" then the original message will never be replaced. The only consequence of an error is that the span’s class is changed from field-validation-valid to field-validation-error (this happens irrespectively of the value of data-valmsg-replace="false").

Some validation methods have parameters, for example RegularExpression. The way these work is very similar, they just need additional data-val- for their parameters. If you want to validate a text field using a regular expression for 5 to 8 digits, it would look like this:

&lt;input type="text" name="number" id="number" data-val="true" data-val-regex="Valid input is 5 to 8 digits" data-val-regex-pattern="^\d{5,8}$"/&gt;

1	<input type="text" name="number" id="number" data-val="true" data-val-regex="Valid input is 5 to 8 digits" data-val-regex-pattern="^\d{5,8}$"/>

If you create the markup yourself you can get away without having to create a model for your view. Using the login example from above, your controller action for handling the user logging in could simply be:

public ActionResult Login(string email, string password)
    {           
        ...
    }

public ActionResult Login(string email, string password)

{

...

}

You’d have to make any server-side checks on the parameters yourself though.

Here is the list of the System.ComponentModel.DataAnnotation attributes you can use, and their data-val counterparts:

Compare
- data-val-equalto="Error message"
- data-val-equalto-other="The name of the other field"
CreditCard
- data-val-creditcard="Error message"
EmailAddress
- data-val-email="Error message"
MaxLength
- data-val-maxlength="Error message"
- data-val-maxlength-max="Maximum length (e.g. 5)"
MinLength
- data-val-minlength="Error message"
- data-val-minlength-min="Minimum length (e.g. 2)"
Range
- data-val-range="Error message"
- data-val-range-max="Max value"
- data-val-range-min="Min value"
RegularExpression
- data-val-regex="Error message"
- data-val-regex-pattern="The regular expression (e.g. ^[a-z]+$)"
Required
- data-val-required="Error message"
StringLength
- data-val-length="Error message"
- data-val-length-max="Maximum number of characters"

There are also a few validation methods you can use that don’t seem to have a counterpart in System.ComponentModel.DataAnnotation. In fact you get a list of all the available client side validation methods by typing (for example in chrome) dev tools console: $.validator.unobtrusive.adapters. Here’s the list of the ones that don’t have a matching attribute: date, digits, number, url, length, remote, password.