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

网站&系统开发技术学习交流群:463167176

本站文章除注明转载外,均为本站原创或翻译,欢迎任何形式的转载,但请务必注明出处,尊重他人劳动,共创和谐网络环境。
转载请注明:文章转载自:华晨软件-云微开发平台 » 初识MVC框架--Controller与View交互2
本文标题:初识MVC框架--Controller与View交互2
本文地址:http://www.hocode.com/OrgTec/Back/0009.html

相关文章: 初识MVC框架--Controller与View交互1 | web框架UI系列--MVC常用控件讲解

电话
电话 18718672256

扫一扫
二维码