niedziela, 10 lipca 2011

MVC 3 Reload PartialView by using jQuery and AJAX

Sometimes it`s easier to reaload only part of the website witout reloading whole page. Thanks to AJAX technology such aproach is possible and easy to code. Let`s begin.

Firstly we need to configure our environment so we must have a Visual Studio with MVC 3  Razor isntalled on it. Razor can be obtained from here. After installation process completed , the second step is to set up a new WebStie project (Picture 1.)

Picture 1.
After you confirm Your project type choise, next window starts. On it You should select the second web project type (with Forms autentication method)  and than choose RAZOR form dropdown (Picture 2.).
Picture 2.
Now You new web solution contains several folders and files by default. Their description is not a point of this article so allow myself to continue. Next step is to create a simple model for our PartialView. As an example I  created a simple _UserModel.cs in Models folder. The source code for this model is:


 public class _UserModel
    {
        [Required]
        public string Name { get; set; }
        [Required]
        public string Surname { get; set; }
    }
The "[Required]" attribute gives an information for MVC  engine to auto-validate the data is not empty. This model is really simple, don`t You think?

Now when we have our simple model, it`s time to create a simple PartialView for them. Let`s our simple user partial view has a name _User (the names starts with "_" means that the model or view is for parial) and be located in Views/Home directory (Picture 3.)
Picture 3.
The content of out partial present below


@model ReloadPartial.Models._UserModel
     
@using (Html.BeginForm("PostMyForm","Home", FormMethod.Post, new { id = "myForm" }))
{
    <h3>
        @Html.ValidationSummary()
    </h3>

    @Html.Raw("Name:")
    @Html.TextBoxFor(m => m.Name)
    <br />
    @Html.Raw("Surname:")
    @Html.TextBoxFor(m => m.Surname)
    <br />
    <input type="button" value="!!Action!!" onclick="SubmitForm();" />
}

After view completed lets focus on controller method. Because we add our view to the Home dictionary out controller is Controllers/HomeController.cs by deafult. In controller code we need to add one simple function which returns PartialViewResult and as a argument take a _UserModel object.


 public PartialViewResult PostMyForm(_UserModel model)
        {
            ModelState.Clear(); //important to see changes in UI
            if (ModelState.IsValid)
            {
                //TODO:  something with model data
            }
            return PartialView("_User",model);
        }
Really simple code...

The last thing  to to is to render our partial. The simplest way to do that is to embed it into Index view which is located in Views/Home. To render our partial we use:
@{Html.RenderPartial("_User", new ReloadPartial.Models._UserModel());}

But is not finish yet, we must make a postback by using jQuery and AJAX. The jQuery framework was added to the project by default in the Views/Shared/_Layout view so we can simple use it.


<script language="javascript" type="text/javascript">

    function SubmitForm() {
        //select and serialize our small form
        var frm = $("#myForm").serialize();
       // get form action
        var action = $("#myForm").attr("action");
        $.ajax({
            url: action,  // or  '@(Url.Action("PostMyForm"))',
            cache: false,
            async: true,
            type: "POST",
            data: frm, //data to post to server
            error: function (html) { alert(html); }, //something goes wrong...
            success: function (data) {
                $("#myForm").html(data); //replace our form content
            }
        });
    }
</script>

It`s done and work:)

Have a fun

Read more..