When calling a form it must be converted into popoup

1

I am working with ASP MVC, I call a partial view that should become popoup , I call it from a button from my view index , the code is as follows:

@Model OperacionesCrudMVC.Models.Phone

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 class="modal-title">Phone Detail</h3>
</div>

<div class="modal-body">
    <div class="form-horizontal">
        <div class="form-group">
            @Html.LabelFor(m => Model.Model, new { @class = "control-label col-sm-3" })
            <div class="col-sm-9">
                @Html.TextBoxFor(m => m.Model, new { @class = "form-control required", @disabled = "disabled" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(m => Model.Company, new { @class = "control-label col-sm-3" })
            <div class="col-sm-9">
                @Html.TextBoxFor(m => m.Company, new { @class = "form-control required", @disabled = "disabled" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(m => Model.Price, new { @class = "control-label col-sm-3" })
            <div class="col-sm-9">
                @Html.TextBoxFor(m => m.Price, new { @class = "form-control required", @disabled = "disabled" })
            </div>
        </div>
    </div>
</div>

<div class="modal-footer">
    <button class="btn btn-warning" data-dismiss="modal">Close</button>

    <div id='myModal' class='modal fade in'>
        <div class="modal-dialog">
            <div class="modal-content">
                <div id='myModalContent'></div>
            </div>
        </div>
    </div>

    @section scripts{
        <script type="text/javascript" src="~/scripts/Appjs/phones.js"></script>
    }
</div>

I have a .js that I imagine does popup:

$(function () {
$.ajaxSetup({ cache: false });
$("a[data-modal]").on("click", function (e) {        
    $('#myModalContent').load(this.href, function () {
        $('#myModal').modal({
            keyboard: true
        }, 'show');
        bindForm(this);
    });
    return false;
function bindForm(dialog) {
$('form', dialog).submit(function () {
    $('#progress').show();
    $.ajax({
        url: this.action,
        type: this.method,
        data: $(this).serialize(),
        success: function (result) {
            if (result.success) {
                $('#myModal').modal('hide');
                $('#progress').hide();
                location.reload();
            } else {
                $('#progress').hide();
                $('#myModalContent').html(result);
                bindForm();
            }
        }
    });
    return false;
});
}
    
asked by Pedro Ávila 09.03.2016 в 14:50
source

1 answer

0

I understand you should perform two operations

  • define the div as a popup

  • load the html of the partial dynamically

Analyze the example

Render partial view inside to Jquery modal popup on top of a parent view

Then define the popup using something like being

$("#myModal").dialog({
    autoOpen: true,
    modal: true,
    open: function () {
        $(this).load('@Url.Action("NombreAction", "NombreController")');
    },
    buttons: {
        "Aceptar": function () {
            //codigo
        },
        Cancel: function () {
            $(this).dialog("close");
        }
    }
});

The content loading of the div is simple by means of the line

$(this).load('@Url.Action("NombreAction", "NombreController")');

Remember to define the action that returns the partial that you would be dumping inside the div.

You do not need an ajax call to load the div

    
answered by 10.03.2016 / 09:26
source