如何通过MVC Action Method显示/隐藏HTML按钮

时间:2012-05-23 06:43:06

标签: c# javascript jquery asp.net-mvc

在我的网页中,我需要根据名为ButtonType的参数值填充按钮 让我们说如果ButtonType == "Edit"那么我需要隐藏每个按钮,但butUpdate

我想知道如何通过MVC Action方法显示/隐藏html按钮。

[AcceptVerbs(HttpVerbs.Post)]
    public ActionResult SupplierDetail(int SupplierID, string ButtonType)
    {   
        var Supplier = supplierListRepository.Supplier_SelectByID(SupplierID);
        return View(Supplier);
    }

我正在使用Asp.net Mvc Razor表格。

@using (Html.BeginForm("SupplierDetail_SubmitClick", "Supplier", FormMethod.Post, new { id = "frmSupplierDetail" }))
{   
@Html.ValidationSummary(true)
<table cellpadding="0" cellspacing="0" border="0" style="width:450px; height:auto">
.....
<tr>
    <td>@Html.LabelFor(model => model.Phone)</td>
    <td>@Html.EditorFor(model => model.Phone)
        @Html.ValidationMessageFor(model => model.Phone)</td>
</tr>
<tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
</tr>
<tr>
    <td>&nbsp;</td>
    <td>
        <input type="submit" id="butSave" name="butSave" value="Save" style="width:100px; height:auto" />
        <input type="submit" id="butUpdate" name="butUpdate" value="Update" style="width:100px; height:auto" />
        <input type="submit" id="butDelete" name="butDelete" value="Delete" style="width:100px; height:auto" />
        <input type="submit" id="butReset" name="butReset" value="Reset" style="width:100px; height:auto" />
    </td>
</tr>
</table>
</div>

<div id="content">
@Html.ActionLink("Back to List", "Index")
</div>

}

每个建议都将受到赞赏。

2 个答案:

答案 0 :(得分:2)

显示/隐藏按钮不是控制器操作的责任。控制器动作甚至不知道按钮的含义。这是视图中存在的概念。另一方面,控制器动作应该与模型通信并准备一个视图模型,它传递给视图进行显示。因此,您可以定义一个视图模型,该模型将包含定义按钮可见性的属性,并根据ButtonType参数的值相应地设置这些属性。然后控制器操作将此视图模型传递给视图,而不是您当前传递的supplier对象。显然,视图模型还具有保留此供应商的属性。现在,视图的所有内容都是基于视图模型属性的值来决定如何显示按钮。

答案 1 :(得分:1)

在控制器中

将buttontype添加到viewdata:

ViewData["ButtonType"] = ButtonType

然后,在视图本身中,您可以添加if / else语句或任何其他适合所有案例的逻辑来决定要呈现的内容:

@if (ViewData["ButtonType"].ToString() == "Edit")
{
    <input type="submit" id="butUpdate" name="butUpdate" value="Update"    
     style="width:100px; height:auto" />      
}

当然,这只是一个可以做什么的演示,Yuo应该将代码调整为你的商业逻辑