Question

I have an array of anchor tags used to submit the form

foreach (var item in items)
<a  class="submitform" data-did='<%:Model.DID%>'  data-daid='<%:Model.daID%>' href="#"><%:Model.DisplayText%>
</a>

on click of anchor I dynamically attach form to it and populate the hidden fields with data- attributes value which i required on form submission like this

 $(".submitforapproval").click(function (e) {
        e.preventDefault();
        var daid = $(this).data("daid");
        var did = $(this).data("did");

        $("<form/>", { action: "/HOME/PostMethod", method: "POST", id: "temp_form" }).appendTo("body");
        $("<input/>", { class: 'jshiddenInput', type: "hidden", name: "docid", value: did }).appendTo("#temp_form");
        $("<input/>", { class: 'jshiddenInput', type: "hidden", name: "DocAID", value: daid }).appendTo("#temp_form");

        $("#temp_form").submit();


    });

I am trying to develop a server side solution for this. one way i think is to have form wrap around each anchor tag and use two hidden field in each form instead of data- attributes.

Answer 1

Why is all this javascript necessary? Why not use standard HTML forms with submit buttons? It seems semantically more correct:

<% foreach (var item in items) { %>
    <% using (Html.BeginForm("PostMethod", "Home", FormMethod.Post)) { %>
        <%= Html.TextBox("docid", Model.DID) %>
        <%= Html.TextBox("docAID", Model.daID) %>

        <button type="submit">
            <%: Model.DisplayText %>
        </button>
    <% } %>
<% } %>

and as far as the server side method is concerned, you could have a view model:

public class DocumentViewModel
{
    public string DocId { get; set; }
    public string DocAId { get; set; }
}

and then your POST controller action will simply take this view model as parameter:

[HttpPost]
public ActionResult PostMethod(DocumentViewModel model)
{
    ...
}