复选框的oncheck重定向到MVC的ActionResult [英] checkbox oncheck redirect to actionresult in mvc
问题描述
我创建MVC中的一个项目，它使用的WebGrid。在我的WebGrid有两列，即状态和 IsActive
I am creating a project in mvc which uses webgrid. In the webgrid I have two columns namely Status and IsActive.
状态栏只能包含两个值：检查或选中。无论这些值来自数据库
The status column can contain only two values: checked or unchecked.Both these values come from database.
该IsActive列复选框，这是选中状态，如果状态在状态列检查，反之亦然。
The IsActive column has checkbox which is in checked state if the status is checked in the Status column and vice versa.
我在我的控制器，一个ActionResult其中检查特定行的地位和它反转（即）如果地位检查了它会变成泛滥，副versa.This是code：
I have an actionresult in my controller which checks the status of the particular row and reverses it (i.e) If the status was checked it will change to unchecked and vice versa.This is the code:
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");
}
在上面的code中的地位相应的状态列的值和路径是在数据库中定义的图像的路径。
In the above code the status is the value of the corresponding Status column and path is the path of the image defined in the database.
当我选中/取消checkbox.Also复选框的状态应该是永久的（即），如果它被选中它，直到我取消它始终保持检查上述code应该执行。
The above code should execute when I check/uncheck the checkbox.Also the state of the checkbox should be permanent (i.e) if it was checked it has to remain checked always till i uncheck it.
修改
这是我得到的路径值，并将其传递给视图的方式：
EDIT This is the way i am getting the value of the path and passing it to the view:
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 是我用我的另一个控制器的路径。
Here the AdPath is the path which i am using in my another controllers.
修改 code的观点：
@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>
</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>
</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>
code的模式：
code for model:
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的复选框，点击如何根据从数据库中的一些值复选框（选中/取消）的状态？
So essentially the question is how to redirect to actionresult on checkbox click and how to make the status of the checkbox (checked/unchecked) based on some value from database?
任何帮助将大大AP preciated。
Any help would be greatly appreciated.
推荐答案
我终于想通了答案。我用复选框的onchange事件调用javascript函数。
这里是code：
I finally figured out the answer. I used the onchange event of the checkbox to call a javascript function. Here is the code:
grid1.Column(header: "IsActive", format: @<text><input name="chk" class="chk2" value="@item.AdPath" type="checkbox" onchange="adchange('@item.AdType','@item.AdPath','@item.Status')" @item.Status/></text>, style: "colOperation"),
和JavaScript函数是：
and the javascript function is :
function adchange(id, path, status) {
$.get('@Url.Action("Add","Ad")' + '?ids=' + id + '&path=' + path + '&status=' +status);
}
由于GDP和达林他们使用JavaScript code的帮助！
Thanks to gdp and Darin for their help with the javascript code!
这篇关于复选框的oncheck重定向到MVC的ActionResult的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
