复选框 oncheck 重定向到 mvc 中的 actionresult答案

【问题标题】：checkbox oncheck redirect to actionresult in mvc复选框 oncheck 重定向到 mvc 中的 actionresult
【发布时间】：2013-02-26 06:05:55
【问题描述】：

我正在使用 webgrid 的 mvc 中创建一个项目。在 webgrid 我有两列，即 Status 和 IsActive。

status 列只能包含两个值：checked 或 unchecked。这两个值都来自数据库。

IsActive 列有复选框，如果在 Status 列中选中状态，则复选框处于选中状态，反之亦然。

我的控制器中有一个 actionresult，它检查特定行的状态并将其反转（即）如果状态被选中，它将变为未选中，反之亦然。这是代码：

public ActionResult Add(string path,string status)
{
    on.Open();
    if (status == "unchecked")
    {
            SqlCommand cmd = new SqlCommand("SpAdRegister1", con);
            cmd.CommandType = CommandType.StoredProcedure;
            cmd.Parameters.AddWithValue("@imagepath", path);
            cmd.ExecuteNonQuery();
        }
    }
    else
    {
        SqlCommand cmd = new SqlCommand("SpAddeRegister", con);
        cmd.CommandType = CommandType.StoredProcedure;
        cmd.Parameters.AddWithValue("@imagepath", path);
        cmd.ExecuteNonQuery();
    }
    return RedirectToAction("Index", "Ad");
}

在上面的代码中，status是对应的Status列的值，path是在数据库中定义的图像的路径。

当我选中/取消选中复选框时，上面的代码应该执行。此外，复选框的状态应该是永久的（即，如果它被选中，它必须一直保持选中状态，直到我取消选中它。

编辑这是我获取路径值并将其传递给视图的方式：

public ActionResult Index()
        {

            SqlCommand cmd = new SqlCommand("select * from Cpecial_Ad_management_tbl where [Partner Name]='"+partname+"' ", con);

            con.Open();
            SqlDataReader dr = cmd.ExecuteReader();
            List<AddDetailModel> model = new List<AddDetailModel>();
            while (dr.Read())
            {
                model.Add(new AddDetailModel()
                {

                AdName = dr["Ad_name"].ToString(),
                AdType=dr["Ad_type_name"].ToString(),
                PartnerName=dr["Partner Name"].ToString(),
                hrefurl=dr["Ad_url"].ToString(),
                startDate=dr["Start_date"].ToString(),
                endDate = dr["End_date"].ToString(),
                tagName = dr["Tag"].ToString(),
                AdPath= dr["Ad_image_path"].ToString(),
                Status = dr["Status"].ToString()              
                });
            }
            dr.Close();

            return View(model);
        }

这里的 AdPath 是我在另一个控制器中使用的路径。

编辑查看代码：

@model IEnumerable<EShopPartnerSetting.Models.AddDetailModel>

@{
    var grid1 = new WebGrid(source: Model.Where(m => m.AdType == "bottom_banner").ToArray(),
                                              defaultSort: "First Name",
                                              rowsPerPage: 2, fieldNamePrefix: "wg_",
                                              canPage: true, canSort: true,
                                              pageFieldName: "pg", sortFieldName: "srt"
                                              );
    var grid2 = new WebGrid(source: Model.Where(m => m.AdType == "side_banner_bottom").ToArray(),
   defaultSort: "First Name",
   rowsPerPage: 2, fieldNamePrefix: "wg_",
   canPage: true, canSort: true,
   pageFieldName: "pg", sortFieldName: "srt"
   );
    var grid3 = new WebGrid(source: Model.Where(m => m.AdType == "side_banner_top").ToArray(),
    defaultSort: "First Name",
    rowsPerPage: 2, fieldNamePrefix: "wg_",
    canPage: true, canSort: true,
    pageFieldName: "pg", sortFieldName: "srt"
    );  
}
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Ad Management</title>
    <link href="../../CSS/AdminLayStyle.css" rel="stylesheet" type="text/css" />
    <link href="../../CSS/Content/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
    <link href="../../CSS/Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
    <link href="../../CSS/Content/themes/base/jquery.ui.base.css" rel="stylesheet" type="text/css" />
    <link href="../../CSS/Content/themes/base/jquery.ui.dialog.css" rel="stylesheet"
        type="text/css" />
    <script src="../../Scripts/jquery-1.7.1.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery-ui-1.8.20.js" type="text/javascript"></script>
    <script type="text/javascript">
        $('input[name=chk]').change(function () {

            var status;
            if ($('input[name=chk]').is(':checked')) {
                status = "checked"
            } else {
                status = "unchecked"
            }
            var path = @Model.AdPath;
            alert(status);
                sendRequest(path, status);
        });
function sendRequest(path, status) {
    $.get('@Url.Action("Add","Ad")' + '?path=' + path + '&status=' + status, function(){
       alert('calling the actionresult add');
    }).done(function(){
       //show an update on the page
    });
}

    <style type="text/css">
       some style
    </style>
</head>
<body>
    @using (Html.BeginForm(new { id = "target" }))
    {
        @Html.ValidationSummary(true)
        <table width="960" border="0" align="center" cellpadding="0" cellspacing="0">
            <tr>
                <td>
                    <div class="maindiv1">
                        <div class="hd">
                            <h3>
                                Ad Management</h3>
                        </div>
                        <div class="bd">
                            <table align="center" cellpadding="0" cellspacing="0" width="100%">
                                <tr>
                                    <td>
                                        <input id="new" type="button" value="Create New Ad" style="color: #FFFFFF; background-color: #1688C6;" />
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        &nbsp;
                                    </td>
                                </tr>
                                <tr>
                                    <td align="center">
                                        <span><div style="background-color:#4FA6E4; width:680px;" >Bottom Banner</div></span>
                                        @grid1.GetHtml(tableStyle: "listing-border", headerStyle: "gridhead", footerStyle: "paging", rowStyle: "td-dark", alternatingRowStyle: "td-light",
                            columns:
                                grid1.Columns(
                                grid1.Column("AdName", "Ad/Campaign", style: "colProductid"),
                                grid1.Column(header: "Ad", format: @<text><img src="@item.AdPath"  id="adimg"  alt="YourText" title="Ad Image"  width:"50px" height="50px"></text>, style: "colAdimage"),
                                grid1.Column("startDate", "Start Date", style: "colCategoryID"),
                                grid1.Column("endDate", "End Date", style: "colCategoryID"),
                                  grid1.Column(header: "IsActive", format: @<text><input name="chk" class="chk2"(@item.Status)" type="checkbox"  @item.Status/></text>, style: "colOperation"),
                                  grid1.Column(header: "Edit", format: @<text><a id="@item.AdName" class="clk"><img
                                    src="../../Images/edit.png" class="asa" width="25px" height="25px" alt="" style="border: none;" /></a></text>, style: "colOperation"),
                                 grid1.Column(header: "Delete", format: @<text><a href="@Url.Action("Delete", "Ad", new { aname = item.AdName, apath = item.AdPath, status = item.Status })" onclick="javascript:return ConfirmDelete();"><img
                                    src="../../Images/delete.png" width="20px" height="20px" alt="" style="border: none;" /></a></text>, style: "colOperation"),
                                 grid1.Column(header: "Status", format: @<text>
                                        </text>, style: "colOperation")
                                         ), mode: WebGridPagerModes.All)
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        &nbsp;
                                    </td>
                                </tr>
                                <tr>
                                    <td width="100%" align="center">
                                        @* <input id="Submit1" type="submit" value="submit" />*@
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <script type="text/javascript">
                            function ConfirmDelete() {
                                return confirm("Are you sure you want to delete this?");
                            }
                        </script>
                    </div>
                    @* <a id="clk">click here</a>*@
                    <div id="dialog" title="Edit" style="overflow: hidden;">
                    </div>
                    <div id="newdialog" title="Create" style="overflow: hidden;">
                    </div>
                </td>
            </tr>
        </table>
    }
</body>
</html>

型号代码：

 public class AddDetailModel
    {

    public string AdName { get; set; }
    public string AdType { get; set; }
    public string PartnerName { get; set; }
    public string hrefurl { get; set; }
    public string startDate { get; set; }
    public string endDate { get; set; }
    public string tagName { get; set; }
    public string AdPath { get; set; }
    public string BannerPath { get; set; }
    public string Status { get; set; }
    }

所以本质上问题是如何在复选框单击时重定向到 actionresult 以及如何根据数据库中的某些值来使复选框的状态（选中/未选中）？

任何帮助将不胜感激。

【问题讨论】：

标签： asp.net-mvc checkbox webgrid

【解决方案1】：

如果您修改添加操作结果以返回某种类型的带有 json 结果的成功消息，您可以使用 javascript 异步执行此操作：

public ActionResult Add(string path, string status)
{
    //Execute your stored procedure.

    //If successful 
    return Json(new { success = true }, JsonRequestBehaviours.AllowGet);
}

$('input[name=CheckBoxName]').change(function(){
    var path = //as your model type is IEnummerable<AddDetail> you will have to select it using javascript
    var status = $(this).is(':checked') ? 'unchecked' : 'checked';
    sendRequest(path, status);
});

function sendRequest(path, status) {
    $.get('@Url.Action('Add')' + '?path=' + path + '&status=' + status, function(){
       alert('calling the actionresult add');
    }).done(function(){
       //show an update on the page
    });
}

另一方面，考虑将您的数据访问代码抽象到不同的层。

【讨论】：

实际上路径是模型中的一个参数。我正在从数据库中获取值并将其传递给视图。我添加了代码来解释它。
好吧，您可以使用 razor @Model.Path 将其写入页面并从那里抓取。如果您想重定向到该页面，请使用 darins answer，否则这将触发操作并停留在同一页面上。
我不想重定向到任何页面。我希望它重定向到 actionresult 并返回到同一页面。另外，如果我通过 path=@Model.AdPath 我得到一个错误
嗯，一种方法是异步点击操作结果并像上面一样更新页面。您收到什么错误？
它显示“预期的表达式”，我也在传递这样的模型：@model IEnumerable

【解决方案2】：

一种可能性是使用 javascript 并订阅复选框的 change 事件，然后重定向到此控制器操作。例如，如果您使用 jQuery，您可能会尝试这样的操作：

<script type="text/javascript">
    $(function() {
        $('table input[type="checkbox"]').change(function() {
            // determine the value of the status parameter based on whether
            // the checkbox that we clicked on was checked or unchecked
            var status = $(this).is(':checked') ? 'unchecked' : 'checked';

            // it's not quite clear where the path parameter should come from
            // but if it shown somewhere in the table you could use a jQuery 
            // selector to retrieve it
            var path = ...;

            // calculate the url to redirect to
            var url = '@Url.Action("Add")' + 
                      '?path=' + encodeURIComponent(path) + 
                      '&status' + encodeURIComponent(status);

            // redirect
            window.location.href = url;
        });
    });
</script>

【讨论】：

我不想重定向我的页面。从我的代码中可以看出，在执行 Add 方法后，用户被重定向回同一页面
是的，这很正常，可以让您更新表格数据。
好的..现在我在给出路径时遇到了问题。我给出了 path=@Model.AdPath 但我得到了预期的表达式错误。我已经用视图代码更新了问题
我没有在您的代码中看到您使用 @Model.AdPath 的位置。此外，这仅在您的模型不是IEnumerable<Something> 时才有效。如果是，那么您需要获取当前行的路径，并且您只能使用 javascript 来执行此操作，因为只有在客户端您才知道单击了哪一行。您不能使用@Model.Path 对路径值进行硬编码。您应该使用 jQuery 选择器从表行的相应列中检索此值。您可以使用.closest() 方法获取相应的行（<tr>），然后下降到正确的列。