如何使用 MVC5 中的数据重定向到新视图？

Question

在我的 _Layout.cshml 文件中，我有以下代码段：

<div class="input-top">
    <a class="GoBtn" href=""><img src="~/Content/img/GOBtn.png" class="gobtn-position"></a>
    <input id="homeZipCode" type="text" class="form-control input-position-2" placeholder="ZIP">
    <input id="homeService" type="text" class="form-control input-position-1" placeholder="What do you need done today?">
</div>

而且重点是我想获取上面两个输入字段的值，并在点击href属性时重定向到一个新视图，但是当它重定向并打开新视图时，在新视图中，在特定的两个输入字段而不是空白，我希望显示这些数据，我的意思是要写入的那些文本。在我重定向的视图中，我有这样的东西：

<div class="form-group">
                            @Html.LabelFor(model => model.ZipCode, "Zip", htmlAttributes: new { @class = "control-label col-md-2" })
                            <div class="col-md-10">
                                @Html.EditorFor(model => model.ZipCode, new { htmlAttributes = new { @class = "form-control" } })
                                @Html.ValidationMessageFor(model => model.ZipCode, "", new { @class = "text-danger" })
                            </div>
                        </div>
                    <div class="form-group">
                        @Html.LabelFor(model => model.ServiceName, "Service", htmlAttributes: new { @class = "control-label col-md-2" })
                        <div class="col-md-10">
                            @Html.EditorFor(model => model.ServiceName, new { htmlAttributes = new { @class = "form-control", @id = "service-manual" } })
                            @Html.ValidationMessageFor(model => model.ServiceName, "", new { @class = "text-danger" })
                        </div>
                    </div>

出于这个原因，我尝试编写一个 AJAX 调用，并将其放在我的 _Layout.cshtml 文件中，但它似乎不起作用。您可以在下面找到我的 AJAX 调用：

$(document).ready(function () {
    $('a.GoBtn').on('click', function (e) {

        e.preventDefault();

        var homeZipCode = $("#homeZipCode").val();
        var homeService = $("#homeService").val();

        var model = { StateID: 1, ZipCode: homeZipCode, ServiceName: homeService };

        $.ajax({
            url: '@Url.Action("ServiceRequest", "Home")',
            contentType: 'application/json; charset=utf-8',
            type: 'POST',
            dataType: 'html',
            data: JSON.stringify(model)
        })
            .success(function (result) {
            });
    });
});

问题是，当我单击 href 属性时，视图没有被重定向，我仍然在单击 href 的视图中。可能是什么问题？

编辑：

public class RequestViewModel
{
    [Required(ErrorMessage = "Please select a state")]
    [Display(Name = "State")]
    public int StateID { get; set; }

    [Required(ErrorMessage = "Please enter a zip code")]
    [Display(Name = "Zip")]
    public string ZipCode { get; set; }

    [Required(ErrorMessage = "Please choose a service")]
    [Display(Name = "Service")]
    public string ServiceName { get; set; }
 }

还有我的控制器：

    [Authorize]
    public ActionResult ServiceRequest()
    {
        ViewBag.StateID = new SelectList(db.States, "StateID", "StateName");
        return View();
    }

    [Authorize]
    [HttpPost]
    public ActionResult ServiceRequest(RequestViewModel rvm, HttpPostedFileBase image = null, HttpPostedFileBase video = null)
    { ... }

Answer 1

您的点击事件中有e.preventDefault();，这会阻止点击链接的默认行为。

对于您的用例，您不需要使用 ajax 发布。您可以将输入控件放在表单标签内并保留提交按钮。如果您仍然想要链接，而不是提交按钮，您可以编写一些 javascript 在用户单击您的链接按钮时发布表单。

在服务器端，有一个接受表单内容的操作方法，然后重定向到新视图。您可以创建一个视图模型并设置它的属性并将其发送到您的新视图。

@using(Html.Beginform("Service","Home"))
{
  <div class="input-top">
    <a class="GoBtn" href=""><img src="~/Content/img/GOBtn.png"></a>
    <input name="ZipCode" type="text" class="form-control input-position-2" >
    <input name="HomeService" type="text" class="form-control input-position-1" >
    <input type="submit" value="Go" />
  </div>
}

你的服务器端代码将是

public ActionResult Service(ServiceRequestViewModel model)
{
  return View(model);
}

假设你有这样的视图模型

public class ServiceRequestViewModel 
{
  public string ZipCode {set;get;}
  public string HomeService{set;get;}
}

现在您的第二个视图 service.cshtml 将被强输入到我们的视图模型中

@model ServiceRequestViewModel
<div>
  <p> @Html.TextBoxFor(s=>s.ZipCode) <p>
  <p> @Html.TextBoxFor(s=>s.HomeService) <p>
</div>

Answer 2

如果要将数据发布到控制器操作，则必须将输入字段包装在表单标签中，以便您的 _Layout.cshtml 代码需要进行一些更改

@using(Html.BeginForm("ServiceRequest","Home",FormMethod.Post,htmlAttributes:new{id="servicerequest-form"})){
    <div class="input-top">
        <a class="GoBtn" href=""><img src="~/Content/img/GOBtn.png" class="gobtn-position"></a>
        <input id="ZipCode" name="rvm.ZipCode" type="text" class="form-control input-position-2" placeholder="ZIP">
        <input id="ServiceName" name="rvm.ServiceName" type="text" class="form-control input-position-1" placeholder="What do you need done today?">
    </div>
}

然后在 javascript 中，您可以在 a 标签的点击事件上发布帖子。

$(document).ready(function () {
    $('a.GoBtn').on('click', function (e) {

        e.preventDefault();

        var servicerequestForm = $("#servicerequest-form);
        servicerequestForm.submit();

    });
});

现在在执行动作时，它应该看起来像这样

[HttpPost]
public ActionResult ServiceRequest(RequestViewModel rvm, HttpPostedFileBase image = null, HttpPostedFileBase video = null)
{
   return View(rvm);
}

假设您的新视图名为“ServiceRequest.cshtml”。控制器和视图中似乎正在发生更多可能影响答案的事情。比如

       ViewBag.StateID = new SelectList(db.States, "StateID", "StateName");

这看起来像是一个正在填充的下拉列表，但似乎没有反映在您提供的 _Layouts.cshtml 中。此外，将文件一起发布将模型信息也会给出不同的答案，即如何处理我希望我能有所帮助的答案？