如何在用户提交Ajax调用后重定向用户

时间:2014-05-18 15:08:57

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

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

@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

1 个答案:

答案 0 :(得分:0)

你可以使用“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 =&gt; m。用户名)      @ Html.HiddenFor(m =&gt; m。密码)      @ Html.HiddenFor(m =&gt; m.ipAddress) 对你的看法 欢呼声