在按钮单击MVC上显示局部视图

用户名

我正在尝试找出mvc,所以我有问题...我有这个模型:

public class Company
    {
        public string ID { get; set; }
        public string Symbol { get; set; }
        public string Description { get; set; }
}

和控制器:

public ActionResult EditCompany()
        {
            ViewBag.Message = "Edit Company Page";
            return View();
        }

        public ActionResult PartialEditCompany()
        {
            DataSet dataSet = client.SelectCompanies();
            ObservableCollection<Company> inventoryList = new ObservableCollection<Company>();
            foreach (DataRow dataRow in dataSet.Tables[0].Rows)
            {
                inventoryList.Add(new Company
                {
                    ID = (String)dataRow["ID"],
                    Symbol = (String)dataRow["Symbol"],
                    Description = (String)dataRow["Description"]
                });
            }
            return PartialView(inventoryList);
        }

并查看EditCompany:

@model Test.Models.Company

@{
    ViewBag.Title = "EditCompany";
    }

<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<link href="~/Content/mycss.css" rel="stylesheet" />

<script>

    $('#loadData').click(function () {
        $('#partial').load('/HomeController/PartialEditCompany/');
    });

</script>

<div id="stylized2" class="myform">
    @using (Html.BeginForm("SaveCompany", "Home", FormMethod.Post, new { @class = "insertcompanyform" }))
    {
        @Html.ValidationSummary(true)
        <table>
            <tr>
            <td class="first">@Html.Label("ID:")
            </td>
            <td class="second">@Html.TextBoxFor(m => m.ID)</td>
        </tr>
            <tr>
            <td class="first">
                @Html.Label("Symbol:")
            </td>
            <td class="second">@Html.TextBoxFor(m => m.Symbol)</td>
        </tr>
        <tr>
            <td class="first">
                @Html.Label("Description:")
            </td>
            <td class="second">@Html.TextBoxFor(m => m.Description)</td>
        </tr>
<tr>
                    <td class="third"><input type="button" value="Traži" id="loadData" /></td>
                    </tr>
    <tr>
                    <td>
                        <div id="partial"></div>
                    </td>
                </tr>

并最终partialview PartialEditCompany:

@using System.Web.Helpers

@{
    var grid = new WebGrid(Model, canPage: true, rowsPerPage: 5,
    selectionFieldName: "selectedRow", ajaxUpdateContainerId: "gridContent");
    grid.Pager(WebGridPagerModes.NextPrevious);
}

<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<link href="~/Content/mycss.css" rel="stylesheet" />

@Html.WebGrid()

我想做的是单击按钮(id = loadData)以调用部分视图,该视图会将网格放入div标签(id = parital)。请帮忙!我究竟做错了什么?

豪尔赫·F

好了,我无法在这里发表评论,这是一些我用来称局部视图的观点

  1. 如果使用“主视图”或“共享视图”,则只需要在主视图上定义脚本,而不必在局部视图中定义脚本。
  2. 如果您希望在点击时加载不带任何参数的局部视图,则可以调用它并“隐藏”

视图

<div id="partial" style="display: none">
    @{Html.RenderAction("PartialEditCompany"); }
</div>

控制者

[ChildActionOnly]
    public ActionResult PartialEditCompany()
    {
        //stuff you need and then return the partial view 
        //I recommend using "" quotes for a partial view
        return PartialView("inventoryList");
    }

然后,如果要在单击时显示部分视图,则仅显示包含div的div。


但是,如果您想将局部视图与参数一起使用,则可以执行以下操作

Java脚本

 function getview(parameter){
         var url = "@Html.Raw(Url.Action("PartialEditCompany", "Controller", new { parameterID = "-parameter" }))";
         url = url.replace("-parameter", parameter);
         $('#partial').load(url);



        /*Better code by October 11, 2017, you can use this instead of the 3 lines on top*/
        /*
         var url = "@Html.Raw(Url.Action("PartialEditCompany", "Controller", new { parameterID = "-parameter" }))";
         url = url.replace("-parameter", parameter);
         $.ajax({
             url: url, 
             type: "GET", 
             cache: false, 
             success: function(result){
                  $("#partial").html(result)
             },
             error: function(){
                 //handle your error here
             }
         });
        */
 }

使用javascript,您可以调用部分视图并将参数传递给控制器​​。当然,您不必指定是否需要参数,但这是我在局部视图中使用的两个解决方案。然后,您可以根据需要调用javascript函数onclick事件。(或在标签上使用data-attr,并在click事件上使用javascript或jquery,而无需创建即可获取该data-attr值,这可能是不引人注目的方式)

<input type="button" value="Traži" id="loadData" onclick='getview(parameter)' />

希望这对局部视图有所帮助。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

在按钮上单击多个ListView

来自分类Dev

在按钮单击jquery上隐藏/显示div

来自分类Dev

div在按钮上单击显示在jQuery中

来自分类Dev

错误在按钮上单击Document.Ready()MVC

来自分类Dev

模拟器未在按钮上显示图像单击android

来自分类Dev

jQuery附加在按钮上单击显示文本然后消失

来自分类Dev

在按钮上单击选择tableViewCell

来自分类Dev

单击按钮时渲染局部视图

来自分类Dev

单击按钮是否可以“交换”局部视图?

来自分类Dev

在按钮上单击列表中的绑定网格视图

来自分类Dev

在按钮单击事件上绑定dxSelectBox

来自分类Dev

如何使用bootstrap或jquery在单击按钮时将局部视图显示为弹出窗口/模式?

来自分类Dev

为什么在按钮上单击语言翻译表不显示?

来自分类Dev

使用Jquery在按钮单击上显示模态

来自分类Dev

使用Jquery在按钮单击上隐藏/显示Div

来自分类Dev

UIAlertController在按钮上单击

来自分类Dev

如何使用JavaScript在按钮单击上显示内容

来自分类Dev

在按钮上单击,页面无用

来自分类Dev

单击时,tkinter会在按钮上递增显示整数

来自分类Dev

android:在按钮上播放音频单击列表视图行内

来自分类Dev

在单选按钮单击上加载不同的局部视图

来自分类Dev

在按钮上显示div单击

来自分类Dev

在按钮单击事件上绑定dxSelectBox

来自分类Dev

Android软键盘未在按钮单击上显示

来自分类Dev

在按钮上单击隐藏键盘

来自分类Dev

UIAlertController在按钮上单击

来自分类Dev

如何使用AngularJS在按钮单击上显示(隐藏的)<td>?

来自分类Dev

单击按钮后,将根据条件显示特定div中的不同局部视图

来自分类Dev

html 表响应未显示在按钮单击 jquery 功能的 MVC 视图中

Related 相关文章

热门标签

归档