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.