0

Consider the following html with three submit buttons:

@using (Html.BeginForm("Process", "Part4", FormMethod.Post, new { id = "submitForm" }))
{
    <select class="form-control" name="lbToolingID" id="lbToolingID">
    @foreach (var toolingID in toolingIDList)
    {
        <option value="@toolingID">@toolingID</option>
    }
    <input class="btn btn-primary" type="submit" name="btnAction" value="Add Tooling" />

    @* Selected tool will be added here on the [Add Tooling] button click *@
    <table>
    @if (Model != null && Model.M_PartTooling_List != null && Model.M_PartTooling_List.Count > 0)
    {
        for (int i = 0; i < Model.M_PartTooling_List.Count; i++)
        {
            <tr>
                <td nowrap>
                    @Html.ActionLink("Remove Location", "Remove", new { @id = Model.M_PartTooling_List[@i].ID }, new { @class = "btn-sm btn-danger" })
                </td>
                <td nowrap colspan="2">
                    @Html.HiddenFor(model => model.M_PartTooling_List[i].ToolingID)
                    @(Model.M_PartTooling_List[i].ToolingID)
                </td>
            </tr>
        }
    } 
    </table>

    @* Once done these buttons will add the records into database *@
    <input class="btn btn-success" type="submit" name="btnAction" value="Save & Return To List" />
    <input class="btn btn-success" type="submit" name="btnAction" value="Save & Continue Create" />
}
...
...
@section Scripts 
{
    @Scripts.Render("~/bundles/jqueryval")
}

The following is the action :

[HttpPost]
public ActionResult Process(M_PartViewModels m_PartViewModels, string btnAction, string lbToolingID)
{
    if (btnAction == "Add Tooling")
    {
        AddPartTooling(m_PartViewModels, lbToolingID);

        return View("Create", m_PartViewModels);
    }

    CreatePart(m_PartViewModels);

    if (btnAction == "Save & Return To List")
    {
        return RedirectToAction("Index");
    }

    return RedirectToAction("Create");
}

On the first time clicking the Add Tooling button, it is working fine, we can see that on breakpoint the value of btnAction is indeed Add Tooling :

enter image description here

But on the second time clicking the Add Tooling button or any other two buttons, somehow the value of btnAction became null :

enter image description here

We have already inspect the said button in the browser and we can see that value of the button still intact :

enter image description here

Can somebody point out what was the cause of this and how to work around this?

I know we can work around this using jQuery but we wanted try this with minimal jQuery coding if possible.

UPDATE

Removing the reference to this script got the page to work as intended but it disables any other (remote) validations that we had:

@section Scripts 
{
    @Scripts.Render("~/bundles/jqueryval")
}

Will look more into this. Possibly if we can disable the call to remote validation temporarily on Add Location button click.

UPDATE 2017-06-22 0017 WITH OK SOLUTION - jquery.validate* is the culprit?

This may not be the solution I would like it to be but as long as it is working I am OK with this.

Since we already knew that removing the

@Scripts.Render("~/bundles/jqueryval")

made the page work as intended.

This is the bundle definition by the way :

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include("~/Scripts/jquery.validate*")); 

I decided to ditch the remote validation

[Remote("CheckPartID", "Part", AdditionalFields = "PartID_Ori", ErrorMessage = "Part ID already in use!")]

defined in my model annotation and port the validation into my action instead :

    [HttpPost]
    public ActionResult CreateProcess(M_PartViewModels m_PartViewModels, string btnAction, string lbToolingID)
    {
        ViewBag.VMainMenu = GetMenu();
        ViewBag.ToolingIDList = GetToolingID();

        CheckPartID(m_PartViewModels);
        CheckPartDesc(m_PartViewModels); 

        if (btnAction == "Add Tooling")
        {
            AddPartTooling(m_PartViewModels, lbToolingID);

            return View("Create", m_PartViewModels);
        } 

        if (ModelState.IsValid)
        { 
            // Do some DB insert stuff

            if (btnAction == "Save & Return To List")
            {
                return RedirectToAction("Index");
            }
            else
            {
                return RedirectToAction("Create");
            } 
        }

        return View("Create", m_PartViewModels);
    } 

    public void CheckPartID(M_PartViewModels m_PartViewModels)
    {
        if (m_PartViewModels.M_Part.PartID != m_PartViewModels.M_Part.PartID_Ori)
        {
            var routingID = db.M_Part.Where(u => u.PartID == m_PartViewModels.M_Part.PartID).FirstOrDefault();

            if (routingID != null)
            {
                ModelState.AddModelError("M_Part.PartID", "Part ID already exists."); 
            }
        }
    }

    public void CheckPartDesc(M_PartViewModels m_PartViewModels)
    {
        if (m_PartViewModels.M_Part.PartDesc != m_PartViewModels.M_Part.PartDesc_Ori)
        {
            var routingID = db.M_Part.Where(u => u.PartDesc == m_PartViewModels.M_Part.PartDesc).FirstOrDefault();

            if (routingID != null)
            {
                ModelState.AddModelError("M_Part.PartDesc", "Part Description already exists.");
            }
        } 
    }

While I felt not entirely satisfied with this solution (where the validation only fires on submit instead on keyup) but since it is working as intended will use this for now.

Will update this once found better way.

Thank you for your kind attention guys. I really appreciate it. :)

Khairul
  • 191
  • 2
  • 14
  • Look at the request payload in the network pane of Google inspect to see what you get. – S. Walker Jun 21 '17 at 00:19
  • Hi @W.Scott, already looked at it. Can you advice what should I be seeing here? Inspecting the request payload is a new thing for me. Sorry for the trouble. – Khairul Jun 21 '17 at 00:35
  • You should see a screen like this: https://i.stack.imgur.com/2NPRm.png you can hit "View Parsed " and see exactly what was sent to the server. Post that here too. – S. Walker Jun 21 '17 at 01:24
  • The following is on the first `Add Tooling` button : [link] (https://i.stack.imgur.com/tilJd.png). And this is the second click : [;ink] (https://i.stack.imgur.com/vIAJU.png). Updated the question in case you are wondering where the `M_PartTooling_List[0].ToolingID` came from. Currently the action for the `@Html.ActionLink("Remove Location", "Remove", new { @id = Model.M_PartTooling_List[@i].ID }, new { @class = "btn-sm btn-danger" })` not yet created. I tried removing this before but the same irregularity occurs. – Khairul Jun 21 '17 at 01:59
  • @W.Scott I can see that the `btnAction` object/value was not sent in the form data. But do not know what was the cause of this. – Khairul Jun 21 '17 at 02:05
  • 1
    Is there any javascript associated with this view? –  Jun 21 '17 at 02:49
  • @StephenMuecke yes. Since you've mentioned about this, I removed the following line in the view `@section Scripts { @Scripts.Render("~/bundles/jqueryval") }` and the subsequent clicks after the first one is working as intended! Is this really the reason that causes the irregularity before? – Khairul Jun 21 '17 at 10:31
  • Removing the script really got the page working as intended but it also disable any other (remote) validation that we already have in place. Will investigate more on this. – Khairul Jun 21 '17 at 13:10
  • @Khairul if you fix the issue Please share it. I am curious to know too.. – Rajshekar Reddy Jun 21 '17 at 13:29
  • Possibly related... https://stackoverflow.com/questions/24450524/jquery-validation-plugin-with-two-submit-buttons – mxmissile Jun 21 '17 at 13:37
  • Updated with a OK solution for now – Khairul Jun 21 '17 at 16:38

0 Answers0