How to open a razor view in a new window (or a new tab)?

Peter Cong

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.

Reply

Peter Cong

Member

356 Points

2189 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

Yongqing Yu

Hi Peter,

Peter Cong

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.

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();

})

The above codes works well, but there is not item.id required,

Reply

Peter Cong

Member

356 Points

2189 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

bruce (sqlwork.com)

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');

win.focus();

})

The above codes works well, but there is not item.id required,

Reply

mgebhard

All-Star

47331 Points

20726 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.

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" })

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.

Reply

Peter Cong

Member

356 Points

2189 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,

Reply

mgebhard

All-Star

47331 Points

20726 Posts

Re: How to open a razor view in a new window (or a new tab)?

Oct 31, 2019 01:46 PM|mgebhard|LINK

Peter Cong
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.

Reply

shaili shah

Member

13 Points

50 Posts

Re: How to open a razor view in a new window (or a new tab)?

Nov 20, 2019 04:41 AM|shaili shah|LINK

add target = "_blank" attribute to link :

@Html.ActionLink(GlobalRes.Details, "Edit", new { id = item.Prod_ID }, new { target = "_blank" })

ASP.NET consulting companies india
https://www.ifourtechnolab.com/asp-dot-net-enterprise-content-management

How to open a razor view in a new window (or a new tab)? [Answered]RSS

8 replies

Shortcuts

Related Links