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

假设你有像这样的View模型

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

现在您的第二个视图service.cshtm l将强烈输入我们的视图模型

@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中，您可以对标记的点击事件发布帖子。

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

假设您的新视图被调用＆＃34; ServiceRequest.cshtml＆＃34;。控制器和视图中似乎还有更多可能影响答案的内容。例如

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

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

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

2 个答案: