使用 ASP.NET MVC 为两个按钮使用相同的输入文本

Question

我想用相同的文本去不同的视图。目前我设置了两个视图，一个是 PlaceInformation，另一个是 Google Map View。如何设置条件以使用 HTML Beginfrom 进行查看。我想在这里使用 @using (Html.BeginForm("GoogleMapView", "Home"))。我的代码示例如下所示-

@using (Html.BeginForm("PlaceInformation", "Home"))
{
    <div class="wrapper wrapper-content">

        <div class="row">
            <div class="col-sm-12">
                @Html.TextBoxFor(m =>m.Name)
                <label for="somevalue">City Name</label>
                    <div class="input-group-btn">
                        <button class="btn btn-lg btn-primary" type="submit">Search</button>
                    </div>
                  <div class="input-group-btn">
                     <button class="btn btn-lg btn-primary" type="submit">Map View</button>
                  </div>
            </div>
        </div>

    </div>
  }

这就是我修改代码的方式。但它不起作用。

<form id="myForm">

<div class="wrapper wrapper-content">

    <div class="row">
        <div class="col-sm-12">
            @Html.TextBoxFor(m => m.Name)
            <label for="somevalue">City Name</label>

            <div class="input-group-btn">
                <button id="searchBtn" class="btn btn-lg btn-primary" type="submit">Search</button>
            </div>
            <div class="input-group-btn">
                <button id="mapViewBtn" class="btn btn-lg btn-primary" type="submit">Map View</button>
            </div>


        </div>
    </div>

</div>

  <script> {
   $("#searchBtn").on("click", function (event) {
    event.preventDefault();

    $.ajax({
        type: "POST",
        url: '/home/placeinformation',
        data: $("#myForm").serialize(), // serializes the form's elements.
        success: function (data) {
            //here you will get the result from the Controllers, like a partial view or you can do a redirect to another view if form post is successful.
        },
        error: function (xhr, status, error) {
           //Handle any errors here
        }
    });
  });
 }
 </script>

<script>{
  $("#mapViewBtn").on("click", function (event) {
    event.preventDefault();

    $.ajax({
        type: "POST",
        url: '/home/GoogleMap',
        data: $("#myForm").serialize(), // serializes the form's elements.
        success: function (data) {
            //here you will get the result from the Controllers, like a partial view or you can do a redirect to another view if form post is successful.
        },
        error: function (xhr, status, error) {
           //Handle any errors here
        }
    });
   });
 }
 </script>

我的 GoogleMap 控制器是-

    public ActionResult GoogleMap(City objCityModel)
     {
        string name = objCityModel.Name;
        ViewBag.Title = name;

        var ReadJson = System.IO.File.ReadAllText(Server.MapPath(@"~/App_Data/POI_Json/" + name + ".json"));

        RootObject json = new System.Web.Script.Serialization.JavaScriptSerializer().Deserialize<RootObject>(ReadJson);
        List<Poi> mycities = new List<Poi>();

        foreach (var item in json.poi)
        {
            Poi obj = new Poi()
            {
                Name = item.Name,
                Shorttext = item.Shorttext,
                GeoCoordinates = item.GeoCoordinates,
                Images = item.Images,

            };
            mycities.Add(obj);
        }

        ViewBag.Cities = mycities;

        return View();

    }

获取名称-

[HttpPost]
    public ActionResult Index(City objCityModel)
    {
        string name = objCityModel.Name;
        return View();
    }

在 My PLace 信息中，我使用与 GoogleMap 视图相同的数据

 public ActionResult PlaceInformation(City objCityModel)
    {

        string name = objCityModel.Name;
        ViewBag.Title = name;

        var ReadJson = System.IO.File.ReadAllText(Server.MapPath(@"~/App_Data/POI_Json/" + name + ".json"));

        RootObject json = new System.Web.Script.Serialization.JavaScriptSerializer().Deserialize<RootObject>(ReadJson);
        List<Poi> mycities = new List<Poi>();

        foreach (var item in json.poi)
        {
            Poi obj = new Poi()
            {
                Name = item.Name,
                Shorttext = item.Shorttext,
                GeoCoordinates = item.GeoCoordinates,
                Images = item.Images,

            };
            mycities.Add(obj);
        }

        ViewBag.Cities = mycities;

        return View();
    }

Answer 1

这只会生成一个 html 表单，它是决定表单发布位置的表单元素。换句话说，没有办法根据单击的按钮将此表单发布到不同的控制器操作。但是，当然还有其他方法。我会像这样使用 jQuery 绑定并发布两个发布按钮：

将 .cshtml 更改为：

<form id="myForm"> 
        @Html.TextBoxFor(m => m.Name)
        <label for="somevalue">City Name</label>

        <div class="input-group-btn">
            <button id="searchBtn" class="btn btn-lg btn-primary" type="submit">Search</button>
        </div>
        <div class="input-group-btn">
            <button id="mapViewBtn" class="btn btn-lg btn-primary" type="submit">Map View</button>
        </div>
</form>

为按钮添加 id：

 <div class="input-group-btn">
     <button id="searchBtn" class="btn btn-lg btn-primary" type="submit">Search</button>
 </div>
 <div class="input-group-btn">
     <button id="mapViewBtn" class="btn btn-lg btn-primary" type="submit">Map View</button>
 </div>

脚本：

$("#searchBtn").on("click", function (event) {
        event.preventDefault();

        $.ajax({
            type: "POST",
            url: '/home/placeinformation',
            data: $("#myForm").serialize(), // serializes the form's elements.
            success: function (data) {
                //here you will get the result from the Controllers, like a partial view or you can do a redirect to another view if form post is successful.
            },
            error: function (xhr, status, error) {
               //Handle any errors here
            }
        });
    });
}

第二个脚本（我更改了您绑定到的按钮和您要调用的控制器操作。

    $("#mapViewBtn").on("click", function (event) {
        event.preventDefault();

        $.ajax({
            type: "POST",
            url: '/home/urlToTheOtherAction,
            data: $("#myForm").serialize(), // serializes the form's elements.
            success: function (data) {
                //here you will get the result from the Controllers, like a partial view or you can do a redirect to another view if form post is successful.
            },
            error: function (xhr, status, error) {
               //Handle any errors here
            }
        });
    });
}