初识MVC框架--Controller与View交互2

在初识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; 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、搜文章onclick=“seacharticle()” ：javascript页面交互方式，通过location.href 方式交互，注意querystring字符串拼写正确。
3、Ajax $.ajax(disoptioan)：通过ajax数据交互异步刷新页面，注意该方式只能刷新当前页面局部视图，不可跳转到其他页面。

转载说明：文章转载自：云微平台-web开发框架 » 初识MVC框架–Controller与View交互2