ASP. net mvc Ajax, asp. netmvcajax

ASP. net mvc Ajax, asp. netmvcajax

This series of directories: ASP. NET MVC4 entry to the master series directory Summary

Unobtrusive Ajax usage (non-intrusive)

Non-Intrusive. In general, JavaScript embedded in Html is taken out and put in a separate js file. Do not display any onclick or onload in html tags.

Unobtrusive Ajax:It is convenient for programmers to write simple and easy-to-maintain ajax Code (Code is cleaner and easier to maintain ).

Basic Features

1. Use pure HTML for webpage content and forms;

2. Forms and super connections can be used normally without using JavaScript;

3. The page exterior is completely controlled by CSS, rather than HTML (do not use table layout) or JavaScript;

4. Anyone can access any device (considering devices that do not support JavaScript;

ASP. Net MVC Enable non-invasive ajax globally

In ASP. NET MVC4, client authentication and non-intrusive js are enabled by default. In Web. config

    <add key="ClientValidationEnabled" value="true" />    <add key="UnobtrusiveJavaScriptEnabled" value="true" />

Add non-invasive js files on the page

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>

It can be disabled on a single View page (View ).

@{Html.EnableUnobtrusiveJavaScript(false);}@{Html.EnableClientValidation(false);}

Note the js reference sequence.

<script src="@Url.Content("~/Scripts/jquery.min.js")" type="text/javascript"></script><script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script><script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script><script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>

AjaxHelper

Asynchronous link button

Note: non-intrusive Ajax must be enabled: The Jquery and unobtrusiveAjax files must be imported.

View: @ Ajax. ActionLink creates an ajax hyperlink button, which is generally used to request dynamic html code (segment View)

@ Ajax. actionLink ("link text", "PartialViewTest", new AjaxOptions () {UpdateTargetId = "divMsg", // The html container id InsertionMode of data display = InsertionMode. replace, // Replace the container content HttpMethod = "Post "})

Controller

        public PartialViewResult PartialViewTest()
        {
            ViewData["Msg"] = "Hello world!";
            return PartialView();
        }

Asynchronous form

View: @ Ajax. BeginForm creates an asynchronous form

@using(Ajax.BeginForm("PartialViewTest","Home",new AjaxOptions{         UpdateTargetId="msgDiv" , InsertionMode= InsertionMode.Replace,          HttpMethod="post" , OnFailure= "fail",         LoadingElementId="lodeingmsg"})){    <input type="text" name="txtName" />    <input type="submit" />}

Controller:

        public PartialViewResult PartialViewTest()
        {
            ViewData["Msg"] = "Hello world!";
            return PartialView();
        }

Example

View: @ Ajax. BeginForm creates an asynchronous form

@ Using (Ajax. beginForm ("PartialView", "Home", new AjaxOptions {UpdateTargetId = "msgDiv", InsertionMode = InsertionMode. replace, HttpMethod = "post", OnFailure = "fail", OnSuccess = "success", OnComplete = "comlete", LoadingElementId = "lodeingmsg "})) {<input type = "text" name = "txtName"/> <input type = "submit"/>}< div id = "lodeingmsg"> <a data-ajax =" true "data-ajax-method =" Post "data-ajax-mode =" replace "data-ajax-update =" # divMsg "href ="/Home/PartialViewTest "> Link text </a>

Request Json data

View:

@Ajax.ActionLink("click here", "DogList", new AjaxOptions() {                         UpdateTargetId="divMsg",                         InsertionMode= InsertionMode.Replace,                          HttpMethod="Get" })

Controller: return a JsonResult using the Json Method

Public ActionResult PartialView () // return type can also be written to JsonResult {var dogList = db. Dogs. ToList (); return Json (dogList, JsonRequestBehavior. AllowGet );}

By default, the MVC Framework does not allow Json responses to Get requests.

Jquery request controller Action

Except for the Action method whose url points to the Controller
For details, see the Jquery help document ajax method:
$. Ajax
$. Post
$. Load
$. Get

Jquery template plugin

Import script:

<script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")"></script><script src="@Url.Content("~/Scripts/jquery.tmpl.min.js")"></script>

Add template-placeholder format: $ (json object property name ):

<script id="temp" type="text/x-jquery-tmpl">            <tr>                <td>${CID}</td><td>${CName}</td><td>${CCount}</td>            </tr></script>

Load data for the template and generate html, and add it to the table:

function ajaxFinish(jsonObjArray) { //[{CID:"1",CName:"aa",CCount:"1"},....{}]       $("#temp").tmpl(jsonObjArray).appendTo("#tbList");}