【问题标题】:How to make redirect a User after they have submitted an Ajax call提交 Ajax 调用后如何重定向用户
【发布时间】:2014-05-18 15:08:57
【问题描述】:

这是我希望用户登录然后离开的视图:

@model IEnumerable<TerminalHost.Models.deviceInfo>

<script>
    $(document).ready(function () {
       $("#myTerminal").dialog({
        autoOpen: false,
        width: 550,
        height: 350,
        show: {
            effect: "fade",
            duration: 650
        },
        hide: {
            effect: "fade",
            duration: 600
        },
        buttons: {
            "OK": function () {
                    //Get he content from the input box
                    var uName = document.getElementById("usernameInput").value;
                    var pWord = document.getElementById("passwordInput").value;
                    var ipAddress = document.getElementById("ipAddressInput").value;
                    $.ajax({
                        type: "POST",
                        url: "/Terminal/terminalLogin",
                        data: { userN: uName, passW: pWord, ipAd: ipAddress},  // pass the data to the method in the Terminal Contoller
                        success: function (data) {
                            window.location.href = data.redirectToUrl;
                        },
                        error: function (e) { alert(e); }
                    })
                },
            "Cancel": function (e) {
                $("#myTerminal").dialog("close");
            }
        }
    });


    $("#terminalAccess").click(function form() {
        $("#myTerminal").dialog("open");
    });
});

function onSuccess() {
    $("#myTerminal").dialog("close");
}
</script>

<div id="myTerminal" title="Terminal Login">
    <label for="username">Username</label>
    <input type="text" name="passwordInput" id="usernameInput" />
    <label for="password">Password</label>
    <input type="password" name="password" id="passwordInput" />
    <label for="ipAddress">Ip Address</label>
    <input type="text" name="ipAddress" id="ipAddressInput" />
</div>

这是用户也会去的视图:

@{
    ViewBag.Title = "Terminal";
}
<script>
  $(document).ready(function () {
    $("#cmdSend").click(function () {
        // Get he content from the input box
        var mydata = document.getElementById("cmdInput").value;
        $.ajax({
            type: "POST",
            url: "/Terminal/processCommand",
            data: { cmd: mydata },  // pass the data to the method in the Terminal Contoller
            success: function (data) {
                //alert(data);
                // we need to update the elements on the page
                var existingHtml = $(".terminal").html();
                $(".terminal").append("</br>" + "->" + mydata + "</br>" + data);
            },
            error: function (e) { alert(e); }
        })
    });
});
</script>
<h3>Terminal for device: *Device name*</h3>
<ol class="round">
<li>

    <article>
        <div class="terminal" style="overflow-y: scroll;" ></div>
        <div class="terminalInputArea">
            <div class="inputBox">
             <input id="cmdInput" /><button type="button" id="cmdSend">Send</button>
            </div>
        </div>
    </article>

</li>
</ol>

这是我希望将数据发送到的控制器:

 public class TerminalController : Controller
{
    SSH ssh = new SSH();

    [HttpPost]
    public ActionResult terminalLogin(string userN, string passW, string ipAd)
    {
        ssh.username = userN;
        ssh.password = passW;
        ssh.ipAddress = ipAd;

        if (Request.IsAjaxRequest())
        {
            return Json(new { redirectToUrl = Url.Action("Terminal") });
        }
        return RedirectToAction("Terminal");
    }

    [HttpPost]
    public string processCommand(string cmd)
    {
        ssh.cmdInput = cmd;
        String info = ssh.SSHConnect();
        info = info.Replace("!", "<br>");
        return info;
    }

    public ActionResult Terminal()
    {
        return View();
    }

}

我没有包含模型,因为我认为这不是问题,但我可以添加它。该模型称为 SSH.cs

【问题讨论】:

  • 更新了代码here 但有问题。

标签: javascript jquery asp.net-mvc-4 asp.net-ajax partial-views


【解决方案1】:

你可以使用“window.location.href = data.redirect;”

$.ajax({
                    type: "POST",
                    url: "/Terminal/Terminal",
                    data: { userN: uName, passW: pWord, ipAd: ipAddress},  // pass the data to the method in the Terminal Contoller
                    success: function (data) {
                       window.location.href = data.redirect;

                        //????? I'm assuming the redirect goes here.
                        alert(data);
                    },
                    error: function (e) { alert(e); }
                })

你的班级应该是这样的

public class TerminalController : Controller
{
SSH ssh = new SSH();

   [HttpPost]
public ActionResult terminalLogin(string userN, string passW, string ipAd)
{
    ssh.username = userN;
    ssh.password = passW;
    ssh.ipAddress = ipAd;

    if (Request.IsAjaxRequest())
    {
        return Json(new { redirectToUrl = Url.Action("Terminal","Your controller", new {parametername_Username=userN, parametername_Password= passW,parametername_IpAddress = ipAd }) });
    }
    return RedirectToAction("Terminal");
}

[HttpPost]
public string processCommand(string cmd)
{
    ssh.cmdInput = cmd;
    String info = ssh.SSHConnect();
    info = info.Replace("!", "<br>");
    return info;
}

public ActionResult Terminal()
{
    return View();
}

}

data.redirect 是您应该从控制器发送的 URL。如果您需要更多详细信息,请告诉我。

将以下元素添加到您的视图中 @Html.HiddenFor( m => m. 用户名) @Html.HiddenFor( m => m. 密码 ) @Html.HiddenFor(m => m.ipAddress) 在你的视野中 干杯

【讨论】:

  • 我试过 here 但我注意到当我重定向我为用户名、密码和 Ip 设置的信息时无效。
  • 您知道如何在用户被重定向时使数据结转吗?
  • 如果我理解你的问题,你需要知道如何在数据上创建重定向,不是吗?它是返回 json 对象的属性。让我知道您需要一个示例代码。如果我没有得到您的问题,您能否详细说明一下。非常抱歉。
  • 我基本上希望用户输入他们将要重定向的页面的登录详细信息(我想出了如何执行重定向)。但是当他们重定向时,他们输入的详细信息丢失了,我发现重定向发生时数据丢失了,我想知道是否有办法在重定向发生时维护数据。
  • 如果您知道一种更好的方法来获取 uname、pword 和 IpAddress 的值并将其存储到用户离开页面之前,我完全赞成。我还有 9 个小时的时间来提交这个项目,这是我的最后一期,所以我现在可以尝试任何事情
猜你喜欢
  • 2020-03-06
  • 1970-01-01
  • 1970-01-01
  • 2014-01-25
  • 1970-01-01
  • 2013-07-18
  • 2013-07-18
相关资源
最近更新 更多