MVC4 Multibuttons in form not working JQM

Question

Im Facing a weird problem on my JQuery mobile APP in MVC4:

I have a form with a couple of texboxes like this

@using Models
@model Models.DataModel.Pagina_Details
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}


@using (Html.BeginForm("Pagina_Details", "Home", FormMethod.Post, new { id =          "PaginaDetailsForm" }))
{
if (Request.QueryString["Command"] != null)
{
    Session["Command"] = Request.QueryString["Command"];
}
else
{
    Response.Redirect("Index");
}
<div class="ui-corner-all custom-corners ui-shadow">
  <div class="ui-bar ui-bar-a">
    <h3>Pagina's</h3>
  </div>
<div class="ui-body ui-body-a">
 <input type="hidden" id="Command" />
  @Html.HiddenFor(model => model.ID)
 @Html.LabelFor(model => model.Name, "Naam *", new { @class = "lbl"})    
 @Html.TextBoxFor(model => model.Name, new { required = "required" })

 @Html.LabelFor(model => model.Description, "Omschrijving *", new { @class = "lbl"})    
 @Html.TextArea("Description", new { required = "required", rows="10", cols="80"})

 @Html.LabelFor(model => model.MetaDescription, "Meta description", new { @class =  "lbl" })    
 @Html.TextBoxFor(model => model.MetaDescription)

 @Html.LabelFor(model => model.MetaKeywords, "Meta keywords", new { @class = "lbl" })    
 @Html.TextBoxFor(model => model.MetaKeywords)

 @Html.LabelFor(model => model.Active, "Actief", new { @class = "lbl" })   
 @Html.CheckBoxFor(model => model.Active)

@if (Session["Command"] == "Insert" || Request.QueryString["Command"] == "Insert")
{
    <button type="submit" name="Command" data-role="button" data-icon="plus">Toevoegen</button>
}       
@if (Session["Command"] != "Insert" && Request.QueryString["Command"] != "Insert")
{
    <button type="submit" id="Edit" name="Command" value="Opslaan" data-role="button" data-icon="edit">Opslaan</button>
    <button type="submit" id="Verwijderen" name="Command" value="Verwijderen" data-role="button" data-icon="delete">Verwijderen</button>
}

</div>

</div>

}

in my ActionResult (Controller) i have the param Command and use that in a switch to do something with it the issue is on the desktop browser it works well and i can see the command is passing to the ActionResult and everything works fine as it should be but for some reason when i try the same thing on my Mobile phone with Phonegap the Command value will always be null

What i tryed: AttributeUsage How do you handle multiple submit buttons in ASP.NET MVC Framework? no result at all.

also i tried different ActionResults for the 2 buttons no result at all.

im lost does someone knows some tips or have any ideas how i can fix this. ty for your time and help.

Answer 1

This might not be what your looking for but why not use the buttons as javascript functions which could change the action of the form before submitting. I think this is a nice way to keep your logic clean and a simple fix. Since your using phonegap javascript shouldnt be a problem. Good Luck!

<script type="text/javascript">
document.getElementById("edit").onclick = function() {
 a=document.getElementsByTagName("form")[0];
a.action ="URL for Edit";
a.submit();
 }
document.getElementById("Verwijderen").onclick = function() {
 a=document.getElementsByTagName("form")[0];
a.action ="URL for Verwijderen";
a.submit();
 }

</script>

Hope This Helps! -Drew

Answer 2

Try this :

If you want to use multiple submit button then you have to use pass FormCollection Form parameter to the post action like this

First change your input button name it cant be same if you want to use multiple submit button so change your submit button code to like this :

@if (Session["Command"] != "Insert" && Request.QueryString["Command"] != "Insert")
{
    <button type="submit" id="Edit" name="CommandBtn1" value="Opslaan" data-role="button" data-icon="edit">Opslaan</button>
    <button type="submit" id="Verwijderen" name="CommandBtn2" value="Verwijderen" data-role="button" data-icon="delete">Verwijderen</button>
}

Now On Home controller post event of the action Pagina_Details is written as :

[HttpPost] 
public ActionResult Pagina_Details(FormCollection Form,ModelClassName ModelClassObject)
{
if(Form["CommandBtn1"]!=null)
{
/// Write code for Opslaan (Edit Code)
}
if(Form["CommandBtn2"]!=null)
{
/// Write code for Verwijderen (Delete Code)
}
return View();
} 

Hopefully its works.