instead, I want to keep the webgrid window still opening, and opens a new window (or tab) for the Edit view (page),
Is that possible? thanks a lot
Yes, it is possible.
In general, for data editing of a table, I suggest that you can use pop-up box to achieve this function, and through Ajax to achieve the modification and saving of data.
You can use dialog or modal pop-up box to achieve the above functions. I have made a simple example with dialog, which you can refer to.
@model IEnumerable<MVC_Cases.Models.Employee>
@{
Layout = null;
WebGrid webGrid = new WebGrid(source: Model);
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>EditIndex</title>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
$("#EditView").dialog({
width: 350,
height: 200,
modal: true,
autoOpen: false,
resizable: false,
draggable: false,
buttons: {
"Save": function () { // use ajax to save data when you click save button
$.ajax({
url: '/C_1031_2161143/ChangeUser',
data: JSON.stringify({
employee: {
EmplId: $("#EmplId").val(),
FirstName: $("#FirstName").val(),
LastName: $("#LastName").val()
}
}),
type: "POST",
contentType: "application/json;charset=UTF-8",
dataType: "json",
success: function () {
alert("save success!"); $("#EditView").dialog("close");//close dialog pop up
location.href = "/C_1031_2161143/Index";
},
error: function (errormessage) {
alert(errormessage.responseText);
}
});
},
"Exit": function () {
$(this).dialog("close");
}
},
});
$(".edit").click(function () {
event.preventDefault();
$("#EditView").dialog("open");//open dialog pop up when you click edit link
$("#EmplId").val($(this).parents("tr").find("td").eq(0).html());
$("#FirstName").val($(this).parents("tr").find("td").eq(1).html());
$("#LastName").val($(this).parents("tr").find("td").eq(2).html());
})
})
</script>
</head>
<body>
@webGrid.GetHtml(
htmlAttributes: new { @id = "WebGrid", @class = "table" },
columns: webGrid.Columns(
webGrid.Column("EmplId", "EmplId"),
webGrid.Column("FirstName", "FirstName"),
webGrid.Column("LastName", "LastName"),
webGrid.Column("", format: @<text>
@Html.ActionLink("Edit", "Edit", null, new { @class = "edit" })
</text>, style: "", canSort: false))) @*this is dialog pop up*@
<div id="EditView" title="Edit Data">
<table style="width:100%;">
<tr>
<td>EmplId</td>
<td><input id="EmplId" type="text" readonly /><br /></td>
</tr>
<tr>
<td>FirstName</td>
<td><input id="FirstName" type="text" /><br /></td>
</tr>
<tr>
<td>LastName</td>
<td><input id="LastName" type="text" /><br /></td>
</tr>
</table>
</div>
</body>
</html>
public class C_1031_2161143Controller : Controller
{
// GET: C_1031_2161143
public ActionResult Index()
{
EntityData entity = new EntityData();
return View(entity.Employees.ToList());
}
[HttpPost]
public JsonResult ChangeUser(Employee employee)
{
EntityData entity = new EntityData();
Employee updatedCustomer = (from c in entity.Employees
where c.EmplId == employee.EmplId
select c).FirstOrDefault();
updatedCustomer.FirstName = employee.FirstName;
updatedCustomer.LastName = employee.LastName;
updatedCustomer.EmailAddr = employee.EmailAddr;
entity.SaveChanges();
return Json("", JsonRequestBehavior.AllowGet);
}
Here is the result of this work demo:
Best Regards,
YongQing.
MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
instead, I want to keep the webgrid window still opening, and opens a new window (or tab) for the Edit view (page),
Is that possible? thanks a lot
Yes, it is possible.
In general, for data editing of a table, I suggest that you can use pop-up box to achieve this function, and through Ajax to achieve the modification and saving of data.
You can use dialog or modal pop-up box to achieve the above functions. I have made a simple example with dialog, which you can refer to.
@model IEnumerable<MVC_Cases.Models.Employee>
@{
Layout = null;
WebGrid webGrid = new WebGrid(source: Model);
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>EditIndex</title>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
$("#EditView").dialog({
width: 350,
height: 200,
modal: true,
autoOpen: false,
resizable: false,
draggable: false,
buttons: {
"Save": function () { // use ajax to save data when you click save button
$.ajax({
url: '/C_1031_2161143/ChangeUser',
data: JSON.stringify({
employee: {
EmplId: $("#EmplId").val(),
FirstName: $("#FirstName").val(),
LastName: $("#LastName").val()
}
}),
type: "POST",
contentType: "application/json;charset=UTF-8",
dataType: "json",
success: function () {
alert("save success!");
$("#EditView").dialog("close");//close dialog pop up
location.href = "/C_1031_2161143/Index";
},
error: function (errormessage) {
alert(errormessage.responseText);
}
});
},
"Exit": function () {
$(this).dialog("close");
}
},
});
$(".edit").click(function () {
event.preventDefault();
$("#EditView").dialog("open");//open dialog pop up when you click edit link
$("#EmplId").val($(this).parents("tr").find("td").eq(0).html());
$("#FirstName").val($(this).parents("tr").find("td").eq(1).html());
$("#LastName").val($(this).parents("tr").find("td").eq(2).html());
})
})
</script>
</head>
<body>
@webGrid.GetHtml(
htmlAttributes: new { @id = "WebGrid", @class = "table" },
columns: webGrid.Columns(
webGrid.Column("EmplId", "EmplId"),
webGrid.Column("FirstName", "FirstName"),
webGrid.Column("LastName", "LastName"),
webGrid.Column("", format: @<text>
@Html.ActionLink("Edit", "Edit", null, new { @class = "edit" })
</text>, style: "", canSort: false)))
@*this is dialog pop up*@
<div id="EditView" title="Edit Data">
<table style="width:100%;">
<tr>
<td>EmplId</td>
<td><input id="EmplId" type="text" readonly /><br /></td>
</tr>
<tr>
<td>FirstName</td>
<td><input id="FirstName" type="text" /><br /></td>
</tr>
<tr>
<td>LastName</td>
<td><input id="LastName" type="text" /><br /></td>
</tr>
</table>
</div>
</body>
</html>
Hi Yongqing, thank you so much for your help and the example codes created for me, but this is not applying to my case, as there is a lot of changes.
I am looking for simple solution. here is I found under my webgrid :
Html.ActionLink(GlobalRes.Details,
"Edit",
null,
new {target =
"_blank", id = item.Prod_ID }).ToString()
This codes open the new tab window, but I got error message below:
The parameters dictionary contains a null entry for parameter 'id' of non-nullable type 'System.Int32' for method 'System.Web.Mvc.ActionResult Edit(Int32)' in 'PROD.Controllers.AIGsController'.
An optional parameter must be a reference type, a nullable type, or be declared as an optional parameter.
Parameter name: parameters
I think the "null" in the code causes that, I think it needs the ID code there, I tried to use "item.Prod_ID", it is not compiled.
Any idea how to customize this ActinLink helper?
added:
I also have this code:
$('#A4AddNewProd').click(function
() {
var win = window.open($(this).data('url'),
'_blank');
Just add the target=“_blank” attribute to action link. See the docs for adding html attributes.
note: any changes to data by the edit window will not be reflected in the primary windows.
Hi bruce, this is a simple solution, I appreciate if you can give me more info, I tried this:
Html.ActionLink(GlobalRes.Details,
"Edit",
null,
new {target =
"_blank", id = item.Prod_ID }).ToString()
This codes open the new tab window, but I got error message below:
The parameters dictionary contains a null entry for parameter 'id' of non-nullable type 'System.Int32' for method 'System.Web.Mvc.ActionResult Edit(Int32)' in 'PROD.Controllers.AIGsController'.
An optional parameter must be a reference type, a nullable type, or be declared as an optional parameter.
Parameter name: parameters
I think the "null" in the code causes that, I think it needs the ID code there, I tried to use "item.Prod_ID", it is not compiled.
Any idea how to use this ActionLink helper?
Added:
I also have this code:
$('#A4AddNewProd').click(function
() {
var win = window.open($(this).data('url'),
'_blank');
Peter, pretty simple. The ID you passed to the Action is null. Either use a nullable int? or fix the source of the null value. Take a few moments to set a break point and debug your code.
Peter Cong
Any idea how to use this ActionLink helper?
IMHO, you need to start reading the reference documentation and using debugger tools. You used the wrong ActionLink() overload and set the input's id attribute not the route (id) value.
@Html.ActionLink(GlobalRes.Details, "Edit", new { id = item.Prod_ID }, new { target = "_blank" })
sorry I didn't know I can add two "new" in the ActionLink helper,
You completely missed the point. Methods in C# can be overloaded which means the same method name can have different input parameters. It's your responsibility to open the reference documentation and read the specs to make sure you are using the correct
method overload. Guessing which overload to use is not an recommended approach. Also set aside time to learn how to use standard debugging tools; dev tools (Browser -> F12) and the Visual Studio debugger. Simply reviewing the HTML is an quick and easy way
to verify an extension method is producing the expected HTML.
Member
340 Points
2112 Posts
How to open a razor view in a new window (or a new tab)?
Oct 30, 2019 02:00 PM|Peter Cong|LINK
In my mvc web app, I have a webgrid with the code as this:
Html.ActionLink(GlobalRes.Edit, "Edit", new { id = item.Inv_ID }).ToString(),
The Edit method of the controller is just like this: return View(viewModel),
When webgrid view opens, and user click Edit, it will replace the current webgrid with the new Edit view,
instead, I want to keep the webgrid window still opening, and opens a new window (or tab) for the Edit view (page),
Is that possible? thanks a lot
All-Star
53274 Points
13162 Posts
Re: How to open a razor view in a new window (or a new tab)?
Oct 30, 2019 02:11 PM|bruce (sqlwork.com)|LINK
Just add the target=“_blank” attribute to action link. See the docs for adding html attributes.
note: any changes to data by the edit window will not be reflected in the primary windows.
Contributor
2400 Points
703 Posts
Re: How to open a razor view in a new window (or a new tab)?
Oct 31, 2019 05:39 AM|Yongqing Yu|LINK
Hi Peter,
Yes, it is possible.
In general, for data editing of a table, I suggest that you can use pop-up box to achieve this function, and through Ajax to achieve the modification and saving of data.
You can use dialog or modal pop-up box to achieve the above functions. I have made a simple example with dialog, which you can refer to.
@model IEnumerable<MVC_Cases.Models.Employee> @{ Layout = null; WebGrid webGrid = new WebGrid(source: Model); } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>EditIndex</title> <link href="~/Content/bootstrap.min.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" /> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script type="text/javascript"> $(function () { $("#EditView").dialog({ width: 350, height: 200, modal: true, autoOpen: false, resizable: false, draggable: false, buttons: { "Save": function () { // use ajax to save data when you click save button $.ajax({ url: '/C_1031_2161143/ChangeUser', data: JSON.stringify({ employee: { EmplId: $("#EmplId").val(), FirstName: $("#FirstName").val(), LastName: $("#LastName").val() } }), type: "POST", contentType: "application/json;charset=UTF-8", dataType: "json", success: function () { alert("save success!");$("#EditView").dialog("close");//close dialog pop up location.href = "/C_1031_2161143/Index"; }, error: function (errormessage) { alert(errormessage.responseText); } }); }, "Exit": function () { $(this).dialog("close"); } }, }); $(".edit").click(function () { event.preventDefault(); $("#EditView").dialog("open");//open dialog pop up when you click edit link $("#EmplId").val($(this).parents("tr").find("td").eq(0).html()); $("#FirstName").val($(this).parents("tr").find("td").eq(1).html()); $("#LastName").val($(this).parents("tr").find("td").eq(2).html()); }) }) </script> </head> <body> @webGrid.GetHtml( htmlAttributes: new { @id = "WebGrid", @class = "table" }, columns: webGrid.Columns( webGrid.Column("EmplId", "EmplId"), webGrid.Column("FirstName", "FirstName"), webGrid.Column("LastName", "LastName"), webGrid.Column("", format: @<text> @Html.ActionLink("Edit", "Edit", null, new { @class = "edit" }) </text>, style: "", canSort: false)))
@*this is dialog pop up*@ <div id="EditView" title="Edit Data"> <table style="width:100%;"> <tr> <td>EmplId</td> <td><input id="EmplId" type="text" readonly /><br /></td> </tr> <tr> <td>FirstName</td> <td><input id="FirstName" type="text" /><br /></td> </tr> <tr> <td>LastName</td> <td><input id="LastName" type="text" /><br /></td> </tr> </table> </div> </body> </html>
public class C_1031_2161143Controller : Controller { // GET: C_1031_2161143 public ActionResult Index() { EntityData entity = new EntityData(); return View(entity.Employees.ToList()); } [HttpPost] public JsonResult ChangeUser(Employee employee) { EntityData entity = new EntityData(); Employee updatedCustomer = (from c in entity.Employees where c.EmplId == employee.EmplId select c).FirstOrDefault(); updatedCustomer.FirstName = employee.FirstName; updatedCustomer.LastName = employee.LastName; updatedCustomer.EmailAddr = employee.EmailAddr; entity.SaveChanges(); return Json("", JsonRequestBehavior.AllowGet); }Here is the result of this work demo:
Best Regards,
YongQing.
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
Member
340 Points
2112 Posts
Re: How to open a razor view in a new window (or a new tab)?
Oct 31, 2019 11:59 AM|Peter Cong|LINK
Hi Yongqing, thank you so much for your help and the example codes created for me, but this is not applying to my case, as there is a lot of changes.
I am looking for simple solution. here is I found under my webgrid :
Html.ActionLink(GlobalRes.Details, "Edit", null, new {target = "_blank", id = item.Prod_ID }).ToString()
This codes open the new tab window, but I got error message below:
The parameters dictionary contains a null entry for parameter 'id' of non-nullable type 'System.Int32' for method 'System.Web.Mvc.ActionResult Edit(Int32)' in 'PROD.Controllers.AIGsController'. An optional parameter must be a reference type, a nullable type, or be declared as an optional parameter.
Parameter name: parameters
I think the "null" in the code causes that, I think it needs the ID code there, I tried to use "item.Prod_ID", it is not compiled.
Any idea how to customize this ActinLink helper?
added:
I also have this code:
$('#A4AddNewProd').click(function () {
var win = window.open($(this).data('url'), '_blank');
win.focus();
})
<input id="A4AddNewProd" type="button" value=@GlobalRes.NewProd class="btn btn-primary btn-sm" data-url='@Url.Action("Create", "Prods")'/>
The above codes works well, but there is not item.id required,
Member
340 Points
2112 Posts
Re: How to open a razor view in a new window (or a new tab)?
Oct 31, 2019 12:00 PM|Peter Cong|LINK
Hi bruce, this is a simple solution, I appreciate if you can give me more info, I tried this:
Html.ActionLink(GlobalRes.Details, "Edit", null, new {target = "_blank", id = item.Prod_ID }).ToString()
This codes open the new tab window, but I got error message below:
The parameters dictionary contains a null entry for parameter 'id' of non-nullable type 'System.Int32' for method 'System.Web.Mvc.ActionResult Edit(Int32)' in 'PROD.Controllers.AIGsController'. An optional parameter must be a reference type, a nullable type, or be declared as an optional parameter.
Parameter name: parameters
I think the "null" in the code causes that, I think it needs the ID code there, I tried to use "item.Prod_ID", it is not compiled.
Any idea how to use this ActionLink helper?
Added:
I also have this code:
$('#A4AddNewProd').click(function () {
var win = window.open($(this).data('url'), '_blank');
win.focus();
})
<input id="A4AddNewProd" type="button" value=@GlobalRes.NewProd class="btn btn-primary btn-sm" data-url='@Url.Action("Create", "Prods")'/>
The above codes works well, but there is not item.id required,
All-Star
43201 Points
18430 Posts
Re: How to open a razor view in a new window (or a new tab)?
Oct 31, 2019 12:47 PM|mgebhard|LINK
Peter, pretty simple. The ID you passed to the Action is null. Either use a nullable int? or fix the source of the null value. Take a few moments to set a break point and debug your code.
IMHO, you need to start reading the reference documentation and using debugger tools. You used the wrong ActionLink() overload and set the input's id attribute not the route (id) value.
@Html.ActionLink(GlobalRes.Details, "Edit", new { id = item.Prod_ID }, new { target = "_blank" })https://docs.microsoft.com/en-us/dotnet/api/system.web.mvc.html.linkextensions.actionlink?view=aspnet-mvc-5.2
Use the browser's dev tools to review the HTML and make sure the markup is what you expect.
Member
340 Points
2112 Posts
Re: How to open a razor view in a new window (or a new tab)?
Oct 31, 2019 01:30 PM|Peter Cong|LINK
Hi mgebhard,
Thanks a lot again, it works well, sorry I didn't know I can add two "new" in the ActionLink helper,
Much appreciated,
All-Star
43201 Points
18430 Posts
Re: How to open a razor view in a new window (or a new tab)?
Oct 31, 2019 01:46 PM|mgebhard|LINK
You completely missed the point. Methods in C# can be overloaded which means the same method name can have different input parameters. It's your responsibility to open the reference documentation and read the specs to make sure you are using the correct method overload. Guessing which overload to use is not an recommended approach. Also set aside time to learn how to use standard debugging tools; dev tools (Browser -> F12) and the Visual Studio debugger. Simply reviewing the HTML is an quick and easy way to verify an extension method is producing the expected HTML.