Question

i’ve created a “create” view to create a new record. This view should be able to upload a picture on creating a new record.

I’ve created a form for submitting values, but when i create a second form within the current form (with a own submit button) for picture uploading the submit button for the second form doesn’t work.

Maybe you have an idea?

create.cshtml

@model Portal.Models.Portal_Auftrag
@{
    ViewBag.Title = "Create";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<script type="text/javascript">
    $(function () {
        $("#tabs").tabs();
        $("#DatumErstZul").datepicker({ dateFormat: 'dd.mm.yy' });
        $("#Schaden_Datum").datepicker({ dateFormat: 'dd.mm.yy' });
    });
</script>
@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)

    <div id="tabs">
        <ul>
            <li><a href="#tabs-5">Bild Unfallschaden</a></li>
        </ul>
        <div id="tabs-5">
            @Html.Action("WebAuftragUpload", ViewContext.RouteData.Values["Controller"].ToString(), new { id = ViewBag.AuftragGUID })
        </div>
    </div>
    <p>
        <input type="submit" name="submit_auftrag" value="Auftrag senden" />
    </p>

}
<div>
    @Html.ActionLink("Back to List", "Index")
</div>

partial view:

<script type="text/javascript">
$(function () {
    $("#ajaxUploadForm").ajaxForm({
        iframe: true,
        dataType: "json",
        beforeSubmit: function () {
            $("#ajaxUploadForm").block({ message: '<h1><img src="/Content/jquery/busy.gif" /> Datei wird hochgeladen...</h1>' });
        },
        success: function (result) {
            $("#ajaxUploadForm").unblock();
            $("#ajaxUploadForm").resetForm();
            $.growlUI(null, result.message);
        },
        error: function (xhr, textStatus, errorThrown) {
            $("#ajaxUploadForm").unblock();
            $("#ajaxUploadForm").resetForm();
            $.growlUI(null, 'Fehler beim hochladen der Datei');
        }
    });
});
</script>
@using (Html.BeginForm("AjaxWebUpload", ViewContext.RouteData.Values["Controller"].ToString(), FormMethod.Post, new { id = "ajaxUploadForm", enctype = "multipart/form-data" }))
{   
    <input type="hidden" name="id" value="@ViewBag.AuftragGUID" />
    <input type="file" name="file" />
    <input id="ajaxUploadButton" type="submit" name="submit_file" value="Datei hochladen" />

}

Answer 1

You are not allowed to nest <form> elements. This is invalid HTML and results in undefined behavior. You should place the second form outside the first one.