ASP. NET MVC unobtrusive Ajax (v)

Objective

In this section we will talk about Ajax submissions in unobtrusive, and in most cases we use jquery to make Ajax requests, and of course, Ajax requests for forms with jquery are no exception, but in relation to unobtrusive Ajax to make form requests is unobtrusive Ajax code volume is more streamlined, so based on this article to talk about this unobtrusive Ajax.

Topic

We begin with a step-by-step discussion of our topic in this section, where we create the following class under the Models folder:

     Public classBlog { Public LongId {Get;Set; }  Public stringName {Get;Set; }  Public stringblogaddress {Get;Set; }  Public stringDescription {Get;Set; }  PublicCategory category; }     Public enumCategory {C, Java, JavaScript, SQL Server}

Next we create a blog controller and initialize the data as follows:

                Privateblog[] Blogs = {                 NewBlog {Id =1, Name ="xpy0928 1", category=category.c,blogaddress="http://www.cnblogs.com/CreateMyself/", Description ="born non-poverty is expensive, you and I can do nothing"},                NewBlog {Id =2, Name ="xpy0928 2", category=category.java,blogaddress="http://www.cnblogs.com/CreateMyself/", Description ="The day after tomorrow if not hard to catch the super, and who can blame it! "},                NewBlog {Id =3, Name ="xpy0928 3", category=category.javascript,blogaddress="http://www.cnblogs.com/CreateMyself/", Description ="they are unreliable and reliable, and who can rely on it! " },                NewBlog {Id =4, Name ="xpy0928 4", Category=category.sqlserver, blogaddress="http://www.cnblogs.com/CreateMyself/", Description ="on your own! "}                               };

Our current scenario is to display all the data in the blog and then filter the corresponding data through the categories in the drop-down box. Let's take a look at:

Show blog All data getblogs

         Public actionresult getblogs ()        {            return  View (blogs);        }

Filter data by Category:

[HttpPost] PublicActionResult Getblogs (stringselectedcategory) {            if(Selectedcategory = =NULL|| Selectedcategory = =" All")            {                returnView (blogs); }            Else{Category selected= (Category) enum.parse (typeof(Category), selectedcategory); returnView (blogs. Where (p = = P.category = =selected)); }        }

In the view, we give the following code:

(1) Get all blog data:

@model IEnumerable<Blog><H2>Getblogs</H2><Tablestyle= "Background-color:lightcoral">    <thead>        <TR>            <th>Id</th>            <th>Name</th>            <th>Blogaddress</th>            <th>Description</th>            <th>Category</th>        </TR>    </thead>    <tbody>@foreach (Blog p in Model) {<TR>                <TD>@p.id</TD>                <TD>@p.name</TD>                <TD>@p.blogaddress</TD>                <TD>@p.description</TD>                <TD>@p.category</TD>            </TR>        }    </tbody></Table>

(2) Generate drop-down category list:

@using (Html.BeginForm ()) {    <Div>        @Html. DropDownList (" Selectedcategory ", New SelectList (new[] {" All "}. Concat (Enum.getnames (typeof (Category        ))))<type= "Submit" > Submit </button>    </div>      }

We run the program with the following results:

Everything is going as normal, but doing so will reload the page.

So the question is, what if we want to not reload the page based on the drop-down list? We'll take advantage of this sectionto unobtrusive ajax!

Unobtrusive Ajax

We need to start with the Web. config as follows:

Next we download unobtrusive Ajax via NuGet, as follows:

Then introduce the following script into the view:

<script src= "~/scripts/jquery-1.10.2.min.js" ></script><script src= "~/Scripts/ Jquery.unobtrusive-ajax.min.js "></script>

We then adjust the Controller method Accordingly, combining the partial view we learned earlier:

 PublicPartialviewresult Getblogdata (stringSelectedcategory =" All") {IEnumerable<Blog> data =blogs; if(Selectedcategory! =" All") {Category selected= (Category) enum.parse (typeof(Category), selectedcategory); Data= Blogs. Where (p = = P.category = =selected); }            returnPartialview (data); }         PublicActionResult Getblogs (stringSelectedcategory =" All")        {            returnView (Object) selectedcategory); }

At this point we focus on using unobtrusive Ajax in the view.

    Ajaxoptions ajaxoptions = new Ajaxoptions    {        Updatetargetid = "blogstable",     };

    <id= "blogstable">        @Html. Action ("Getblogdata", new { Selectedcategory = Model})    </tbody>

Use the Updatetargetid in ajaxoptions to correspond to the data we need to filter. Next we use AJAX requests

@using (Ajax.beginform ("Getblogdata", Ajaxoptions)) {    <Div>         @Html. DropDownList ("Selectedcategory", New SelectList (            new[] {"All"}. Concat (Enum.getnames (typeof (Category        ))))<type= "Submit" > Submit </button>    </div> }

Let's look at the results of the operation:

Next, let's take a look at ajaxoptions other parameters:

    New ajaxoptions    {        = "Blogstable",        = "Loadingblogs",        = +,        = "Do you really want to show all blogs?" ,    };

<id= "Loadingblogs"  style= "background-color:cadetblue; display: None ">    <p>Loading Blogs ... </ P > </ Div >

The above Loadingelementid is loaded when the data is loaded, loadingelementduration is displayed during load time. Let's look at its display effect by extending the time.

Display in Load:

As above we are using the dropdown box to click the Submit button to get the data.

So the question is, how do we get the data through the link? Please look down.

We add the following in the view:

< Div >     @foreach (String category in Enum.getnames (typeof (category)))    {        <   Class= "Ajaxlink">            @Ajax. ActionLink (category, "Getblogdata",                new { selectedcategory = category},                new ajaxoptions {updatetargetid = "blogstable"})        </  div>    }</div>

Let's run a look at the effect:

We click c to try the effect, as follows:

Conclusion

In this section we use unobtrusive Ajax to implement jquery-like Ajax submissions, and using unobtrusive Ajax is also a good way, and unobtrusive Ajax in Ajaxoptions there are other parameters interested in children's shoes can be learned. This section uses this to request the partial view and fills, but this is not the optimal scheme, we can use JSON to return the data, right, the next section we use Jsonresult to return data. Good night, world. Description: For the MVC series code is all hosted on GitHub, you can click on the top right corner (Fork me on github) to download the code.

ASP. NET MVC unobtrusive Ajax (v)