在初识MVC框架–Controller与View交互1中,我们介绍了几种常见的Controller和View之间传递数据,下面我们通过Web开发框架项目中一个例子为大家讲解三种经典方式。
- Html页面代码
- javascript代码
- 后台action
- 三种交互方式讲解
Html页面代码
@using (Html.BeginRouteForm("ProductSearch", FormMethod.Get, new { onsubmit = "return check_small_search_form()" }))
{
<li class="input-group" style="margin-top:20px;">
<input type="text" style="height:40px; width:260px; float:right;" id="small-searchterms" @(Model.AutoCompleteEnabled ?
Html.Raw(" autocomplete=\"off\"") : null)
value="@T("Search.SearchBox.Tooltip")" name="q" onfocus="if(this.value=='@T("Search.SearchBox.Tooltip")')
this.value=''" onblur="if(this.value=='') {this.value = '@T("Search.SearchBox.Tooltip")';}" />
<span class="input-group-btn">
<button type="submit" class="btn btn-default"> 搜产品 </button>
</span>
<span class="input-group-btn">
<button type="button" onclick="seacharticle()" class="btn btn-success"> 搜文章 </button>
</span>
</li><!-- /input-group -->
}
javascript代码
function seacharticle()
{
var chek=check_small_search_form();
if(chek){
var searchcontent='q='+$("#small-searchterms").val();
location.href = "/Catalog/SearchArticle?"+searchcontent;
}
@*var searchcontent=$("#small-searchterms").val();
var disoptioan = {
url: "@Url.Action("SearchArticle", "Catalog")",
type: 'Get',
dataType: 'json',
data: searchcontent,
context: this,
success: function (result) {
//页面刷新代码
}
};
$.ajax(disoptioan);*@
}
后台action
[NopHttpsRequirement(SslRequirement.No)]
[ValidateInput(false)]
public ActionResult Search(SearchModel model, CatalogPagingFilteringModel command)
{
//处理...
return View(model);
}
[NopHttpsRequirement(SslRequirement.No)]
[ValidateInput(false)]
public ActionResult SearchArticle(SearchArticleModel searchArticleModel)
{
//.........方法处理
return View(searchArticleModel);
//return Json(searchArticleModel, JsonRequestBehavior.AllowGet);
}
三种交互方式讲解
1、搜产品Html.BeginRouteForm(…):表单提交方式,通过button type=“submit” 方式整体交互,注意表单参数要与action一致。
2、搜文章οnclick=“seacharticle()” :javascript页面交互方式,通过location.href 方式交互,注意querystring字符串拼写正确。
3、Ajax $.ajax(disoptioan):通过ajax数据交互异步刷新页面,注意该方式只能刷新当前页面局部视图,不可跳转到其他页面。
转载说明:文章转载自:华晨软件-微云开发平台 » 初识MVC框架–Controller与View交互2