Question

我想使用相同的文字来进行不同的View.At present我设置了两个视图，一个是PlaceInformation，另一个是Google Map View。如何设置条件同时使用HTML开始查看。我想在这里使用@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();
    }

在我的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
            }
        });
    });
}

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

1 个答案: