Use same input text for two button using ASP.NET MVC - html

Question

I want to use the same text to go different View.At present I set two view one is PlaceInformation and another is Google Map View. How can I set condition to go both View using HTML Beginfrom.I want to use #using (Html.BeginForm("GoogleMapView", "Home")) here. My Code sample is look like this-
#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>
}
This is how i modified code .But it is not working.
<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>
My Controller for GoogleMap is-
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();
}
For Getting the name-
[HttpPost]
public ActionResult Index(City objCityModel)
{
string name = objCityModel.Name;
return View();
}
in My PLace information I am using the same data as GoogleMap view
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

This will only generate one html form and it is the form element that decides where the form is posted. In other words there is no way to post this form to different controller actions depending on the button being clicked. However, there are of course other ways. I would bind and post the two post buttons with jQuery like this:
Change .cshtml to this:
<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>
Add id to the buttons:
<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>
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
}
});
});
}
second script (I changed the button you bind to and the controller action you want to call.
$("#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
}
});
});
}