zoukankan      html  css  js  c++  java
  • 初识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

  • 相关阅读:
    专有宿主机如何实现“资源池”管理——集群管理能力升级
    像Google一样构建机器学习系统3
    利用阿里云容器服务打通TensorFlow持续训练链路
    阿里云积极落实等级保护制度,政务云全国首个通过等保2.0合规评测
    Facebook F8|闲鱼高级技术专家参会分享
    UI2CODE智能生成代码——组件识别篇
    基于TableStore的海量气象格点数据解决方案实战
    药品监管系统架构揭秘:海量溯源数据存储与查询
    对比MySQL,一文看透HBase的能力及使用场景
    bzoj1003 [ZJOI2006]物流运输
  • 原文地址:https://www.cnblogs.com/frfwef/p/12516516.html
Copyright © 2011-2022 走看看