Validate multiple Partial view without BeginForm in a View

Question

I have a View (Index.cshtml) that it has two modals (Bootstrap modal).

I have loaded a Partial View in each ‍‍‍modal. So in this View, I have two Partial Views(AddContractHistory.cshtml and AddCompany.cshtml).

I have a model that it's fields should be validated in each of the Partial Views. I need to validate each of the partial views separately.

In same other issue, Html.BeginForm was used but I work on MVC module and DNN 8 that Html.BeginForm or Ajax.Html.BeginForm aren't supported.

For doing this work without having BeginForm, I tested many ways like below but I couldn't do it properly.

ASP.NET MVC Validation Groups?

ASP.NET MVC Multiple form in one page: Validation doesn't work

Index.cshtml (View)

@using MyProject.BusinessLogic
<div class="form-group">
    <div class="col-sm-12">
        <button type="button" class="btn btn-success" onclick="$('#AddContractHistory').modal('show');">
            <i class="fa fa-plus"></i>
            New ContractHistory
        </button>
    </div>
    <div class="col-sm-12">
        <button type="button" class="btn btn-success" onclick="$('#AddCompany').modal('show');">
            <i class="fa fa-plus"></i>
            New Company
        </button>
    </div>
</div>

<div id="AddContractHistory" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg" id="mymodal">
        @Html.Partial("AddContractHistory", new ContractHistory())
    </div>
</div>
<div id="AddCompany" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg" id="mymodal">
        @Html.Partial("AddCompany", new Company())
    </div>
</div>

AddContractHistory.cshtml (PartialView)

@inherits DotNetNuke.Web.Mvc.Framework.DnnWebViewPage<MyProject.BusinessLogic.ContractHistory>

<div id="myform">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">contract</h4>
        </div>
        <div class="modal-body">
            <div class="row">
                <div class="panel-body">
                    <div class="form-horizontal">
                        @Html.ValidationSummary()
                        @Html.HiddenFor(c => c.ID)
                        <div class="form-group">
                            <div class="col-sm-6">
                                @Html.LabelFor(c => c.PlaceName)
                                <div class="input-group">
                                    <span class="input-group-addon">
                                        <i class="fa fa-file-text-o" aria-hidden="true"></i>
                                    </span>
                                    @Html.EditorFor(c => c.PlaceName, new { htmlAttributes = new { @class = "form-control requierd-field" } })
                                </div>
                            </div>
                            <div class="col-sm-6">
                                @Html.LabelFor(c => c.ActivityDescription)
                                <div class="input-group">
                                    <span class="input-group-addon">
                                        <i class="fa fa-file-text-o" aria-hidden="true"></i>
                                    </span>
                                    @Html.EditorFor(c => c.ActivityDescription, new { htmlAttributes = new { @class = "form-control requierd-field" } })
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button type="submit" class="btn btn-success" formaction="AddContractHistory">
submit
            </button>
            <button type="button" class="btn btn-default" data-dismiss="modal">cancel</button>
        </div>
    </div>
</div>

AddCompany.cshtml (PartialView)

@inherits DotNetNuke.Web.Mvc.Framework.DnnWebViewPage<MyProject.BusinessLogic.Company>

<div id="myform">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Company</h4>
        </div>
        <div class="modal-body">
            <div class="row">
                <div class="panel-body">
                    <div class="form-horizontal">
                        @Html.ValidationSummary()
                        @Html.HiddenFor(c => c.ID)
                        <div class="form-group">
                            <div class="col-sm-6">
                                @Html.LabelFor(c => c.PlaceName)
                                <div class="input-group">
                                    <span class="input-group-addon">
                                        <i class="fa fa-file-text-o" aria-hidden="true"></i>
                                    </span>
                                    @Html.EditorFor(c => c.PlaceName, new { htmlAttributes = new { @class = "form-control requierd-field" } })
                                </div>
                            </div>
                            <div class="col-sm-6">
                                @Html.LabelFor(c => c.ActivityDescription)
                                <div class="input-group">
                                    <span class="input-group-addon">
                                        <i class="fa fa-file-text-o" aria-hidden="true"></i>
                                    </span>
                                    @Html.EditorFor(c => c.ActivityDescription, new { htmlAttributes = new { @class = "form-control requierd-field" } })
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button type="submit" class="btn btn-success" formaction="AddCompany">
                submit
            </button>
            <button type="button" class="btn btn-default" data-dismiss="modal">cancel</button>
        </div>
    </div>
</div>

Thanks in advance!

Answer 1

You can implement your Html.BeginForm, which it's not supported in Dotnetnuke, in another way.

1. Change your buttons attributes

You should change buttons, which cause posting data to actions, like below:

<button id="btnAddContractHistory" type="button" class="btn btn-success">
    submit
</button>

<button id="btnAddCompany" type="submit" class="btn btn-success">
    submit
</button>

2. Add events click for buttons

Two click events call for posing data to desire actions. In this events, which are different in url, action attribute form are changed by your url and after that form.submit() causes pass data (model) to related action. Finally you would validate values of properties in two different actions.

<script>

    $('.modal').find('#btnAddContractHistory').on('click', function () {
        var url = 'AddContractHistory action url'; // It depends on your AddContractHistory action url
        var form = $(this).closest('form');
        form.prop('action', url);
        form.submit();
    });

    $('.modal').find('#btnAddCompany').on('click', function () {
        var url = 'AddCompany action url'; // It depends on your AddCompany action url
        var form = $(this).closest('form');
        form.prop('action', url);
        form.submit();
    });

</script>