Asp.net MVC learning diary 11 (jquery asynchronous submission form)

1. Go to http://jquery.malsup.com/form/.download the jquery. Form. js plug-in.

2. Introduction of jquery-1.6.2.min.js and jquery. Form. js

<SCRIPT src = ".../scripts/jquery-1.6.2.min.js" type = "text/JavaScript"> </SCRIPT>
<SCRIPT src = ".../../scripts/jquery. Form. js" type = "text/JavaScript"> </SCRIPT>

3. The previous article is required.

Public class article
{
Public guid ID {Get; set ;}

Public String title {Get; set ;}
Public String subject {Get; set ;}

Public String description {Get; set ;}
Public datetime createdate {Get; set ;}
Public bool ispublished {Get; set ;}
Public int timesviewed {Get; set ;}

Public String formattedcreatedate
{
Get
{
If (createdate! = Datetime. minvalue)
Return string. Format ("{0: D/M/YYYY hh: mm: SS}", createdate );
Return "";
}
}
}

4. Add article, articlesaved, _ articlesaved, and post articles to homecontroller.

Public actionresult article ()
{
Return view (new article ());
}

Public actionresult articlesaved ()
{
Return view ();
}

Public actionresult _ articlesaved ()
{
Return partialview ();
}

[Httppost]
Public actionresult article (article, string btnsubmit)
{
If (request. isajaxrequest ())
Return content ("article saved! ");
Return redirecttoaction ("articlesaved ");
}

5. Implement the articlesaved view articlesaved. aspx and add the following code internally:

<% Html. renderpartial ("_ articlesaved"); %>

6. Implement _ articlesaved's segment VIEW _ articlesaved. ascx and add the following code to it:

<P> hello, not ajaxform </P>

7. In article. aspx

<Script language = "JavaScript" type = "text/JavaScript">
$ (Function (){
$ ("Form"). ajaxform ({target: "# result "});
});
</SCRIPT>

<H2> Article </H2>

<Div id = "result"> </div>

<% Using (html. beginform ("article", "home") {%>

<Fieldset>
<Legend> fields </legend>

<Div class = "editor-label">
<%: HTML. labelfor (model => model. ID) %>
</Div>
<Div class = "editor-field">
<%: HTML. textboxfor (model => model. ID) %>
<%: HTML. validationmessagefor (model => model. ID) %>
</Div>

<Div class = "editor-label">
<%: HTML. labelfor (model => model. Title) %>
</Div>
<Div class = "editor-field">
<%: HTML. textboxfor (model => model. Title) %>
<%: HTML. validationmessagefor (model => model. Title) %>
</Div>

<Div class = "editor-label">
<%: HTML. labelfor (model => model. Subject) %>
</Div>
<Div class = "editor-field">
<%: HTML. textboxfor (model => model. Subject) %>
<%: HTML. validationmessagefor (model => model. Subject) %>
</Div>

<Div class = "editor-label">
<%: HTML. labelfor (model => model. Description) %>
</Div>
<Div class = "editor-field">
<%: HTML. textboxfor (model => model. Description) %>
<%: HTML. validationmessagefor (model => model. Description) %>
</Div>

<Div class = "editor-label">
<%: HTML. labelfor (model => model. createdate) %>
</Div>
<Div class = "editor-field">
<%: HTML. textboxfor (model => model. createdate, String. Format ("{0: g}", model. createdate) %>
<%: HTML. validationmessagefor (model => model. createdate) %>
</Div>

<Div class = "editor-label">
<%: HTML. labelfor (model => model. ispublished) %>
</Div>
<Div class = "editor-field">
<%: HTML. textboxfor (model => model. ispublished) %>
<%: HTML. validationmessagefor (model => model. ispublished) %>
</Div>

<Div class = "editor-label">
<%: HTML. labelfor (model => model. timesviewed) %>
</Div>
<Div class = "editor-field">
<%: HTML. textboxfor (model => model. timesviewed) %>
<%: HTML. validationmessagefor (model => model. timesviewed) %>
</Div>
<Input type = "Submit" value = "save"/>
</Fieldset>

<% }%>

<Div>
<%: HTML. actionlink ("back to list", "Index") %>
</Div>

Directly click Save. the asynchronous form of jquery will be used to send back the output and return the article saved!

If you comment out $ ("form"). ajaxform ({target: "# result"});, you will enter the _ articlesaved. ascx view.