Skip to main content

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


Labels:

Popular posts from this blog

Persisting Enum in database with Entity Framework

Problem statement We all want to write clean code and follow best coding practices. This all engineers 'North Star' goal which in many cases can not be easily achievable because of many potential difficulties with converting our ideas/good practices into working solutions.  One of an example I recently came across was about using ASP.NET Core and Entity Framework 5 to store Enum values in a relational database (like Azure SQL). Why is this a problem you might ask... and my answer here is that you want to work with Enum types in your code but persist an integer in your databases. You can think about in that way. Why we use data types at all when everything could be just a string which is getting converted into a desirable type when needed. This 'all-string' approach is of course a huge anti-pattern and a bad practice for many reasons with few being: degraded performance, increased storage space, increased code duplication.  Pre-requirements 1. Status enum type definition...
more -->

Creating common partial class with Entity Framework

When we use the Entity Framework (EF) in multilayer information systems sometimes we want to extend classes generated by EF by adding some common properties or functions. Such operation can`t be conduct on *.edmx data model so we need to make some improvement in our solution. Let`s begin... Lets assumed that in our soulution we have only three layer (three project): Client console application which has reference to the second layer  - ' ConsoleApplication ' project name Class library project with class interfaces only - ' Interfaces ' project name Class library class implementation and data model referenced to 'Interfaces' project - ' Classes ' project name. Picture 1. Solution structure. Now when we have all solution structure we can focus on data model. In the ' Classes ' project we create a new folder named ' Model ' and inside add new item of ADO.NET Entity Data Model named ' Learning.edmx ' - it may be empty ...
more -->

Using Hortonworks Hive in .NET

A few months ago I decided to learn a big data. This sounds very complex and of course it is. All these strange names which actually tells nothing to person who is new in these area combined with different way of looking at data storage makes entire topic even more complex. However after reading N blogs and watching many, many tutorials today I finally had a chance to try to write some code. As in last week I managed to setup a Hortonworks distribution of Hadoop today I decided to connect to it from my .NET based application and this is what I will describe in this post. First things first I didn`t setup entire Hortonworks ecosystem from scratch - I`d love to but for now it`s far beyond my knowledge thus I decided to use a sandbox environment provided by Hortonworks. There are multiple different VMs available to download but in my case I`ve choose a Hyper-V. More about setting this environment up you can read here . Picture 1. Up and running sandbox environment. Now whe...
more -->