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

Question

我想使用相同的文本来换 View.At 现在我设置了两个视图，一个是PlaceInformation，另一个是Google地图视图。我想在这里使用@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>

我的谷歌地图控制器是-

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

在我的PLace信息中，我正在使用与谷歌地图视图相同的数据

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