After form submitted event?

Question

User-79977429 posted

Hi

In my index view, use can add/update order in modal form (via javascript client side code). it works correctly. i want to close modal form & do some actions after form has been submitted.

can anybody help me how to accomplish this task?

Thanks

Answer 1

User475983607 posted

In my index view, use can add/update order in modal form (via javascript client side code). it works correctly. i want to close modal form & do some actions after form has been submitted.

can anybody help me how to accomplish this task?

hamed_1983, you need to realize the community cannot see your code.  We have no idea if you are using AJAX or fetch  We have no idea what modal you are using. 

If you are using jQuery AJAX then close the modal in the success handler.  See the AJAX docs and read the documentation for the modal you are using to hide the modal.  

Answer 2

User-854763662 posted

Hi hamed_1983 ,

In my index view, use can add/update order in modal form (via javascript client side code). it works correctly. i want to close modal form & do some actions after form has been submitted.

What have you tried ? For your demand , you can Google to find many same or similar resolved threads. Since we don’t know your code, it’s a bit difficult to provide you with an effective solution。

Best Regards,

Sherry

Answer 3

User-79977429 posted

Hi again, Oh sorry!

Here is my partial view which display a list of orders for a selected person in main index view :

<button type="button" id="btnNew" class="btn btn-success btn-sm" onclick="newOrderItem(@((int)ViewData["_personID"]))">Create new</button>
<br />
<table class="table table-bordered">
    <tr>
        <th>Order ID</th>
        <th>Order Number</th>
        <th>Order Date</th>
        <th>Commands</th>
    </tr>
    @if (Model != null)
    {
        foreach (var item in Model)
        {
            <tr>
                <td>@item.OrderId</td>
                <td>@item.OrderNumber</td>
                <td>@item.OrderDate.Value.ToShamsiDate()</td>
                <td>
                    <input type="button" id="btnEdit" class="btn btn-warning btn-sm" onclick="editOrderItem(@item.OrderId)" value="Edit" />
                </td>
            </tr>
        }
    }
</table>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog" data-backdrop="static">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">New order</h4>
            </div>
            <div id="myModalBody" class="modal-body">
                <p>Some text in the modal.</p>
            </div>            
        </div>

    </div>
</div>

When user click on Create button, The following view display to user as modal :

@model AspNetCore01.Models.Orders

<div class="row">
    <div class="col-md-6">
        <form id="frmNewOrderItem" asp-action="CreateOrder" method="post">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <input type="hidden" asp-for="PersonId" value="@ViewData["_personId"]" />
            <div class="form-group">
                <label asp-for="OrderId" class="control-label"></label>
                <input asp-for="OrderId" class="form-control" value="@ViewData["_orderId"]" />
                <span asp-validation-for="OrderId" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="OrderNumber" class="control-label"></label>
                <input asp-for="OrderNumber" class="form-control" />
                <span asp-validation-for="OrderNumber" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="OrderDate" class="control-label"></label>
                <input asp-for="OrderDate" class="form-control" value="@DateTime.Now.ToString()" />
                <span asp-validation-for="OrderDate" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Description" class="control-label"></label>
                <textarea asp-for="Description" class="form-control" />
                <span asp-validation-for="Description" class="text-danger"></span>
            </div>
            <div class="modal-footer text-right">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="submit" id="btnCreateOrder" class="btn btn-success">Create</button>
            </div>
        </form>
    </div>
</div>


<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>

And here is my javascript code for above function(s) :

function viewItem(personId, personName) {
    //alert(personId);
    $('#htmOrdersBody').html('Loading ...');
    $('#htmOrdersTitle').html('Orders for ' + personName + '(' + personId + ')');
    $.get('GetOrders/' + personId, function (data, status) {
        $('#htmOrdersBody').html(data);
    });
}

// Shared/_GetOrdersPartialView method(s)
function newOrderItem(personID) {
    //alert('Hii');
    $.get('NewOrder?personID=' + personID, function (data, status) {
        $('#myModalBody').html(data);
        $('#myModal').modal('show');
    });    
}

function editOrderItem(orderId) {
    alert(orderId);
}

And here is my main Index view :

@model IEnumerable<Persons>

<table class="table table-bordered">
    <tr>
        <th>Person ID</th>
        <th>Person Name</th>
        <th>Description</th>
        <th>Commands</th>
    </tr>
    @if (Model != null)
    {
        foreach (var item in Model)
        {
            <tr onclick="viewItem('@item.PersonId', '@item.PersonName')">
                <td>@item.PersonId</td>
                <td>@item.PersonName</td>
                <td>@item.Description</td>
                <td>                    
                </td>
            </tr>
        }
    }
</table>

<div id="htmOrdersTitle">Orders</div>
<hr />
<div id="htmOrdersBody"></div>

I want when user create new order in modal form, i've handle submission event, close modal & do some actions.

Thanks in advance

Answer 4

User475983607 posted

haned_1983, you did not share the actual code that we need to provide assistance.  The HTML from posts to the CreateOrder action.  You get to write code in this action to fetch any Model you like and pass that model to a View.  you get to create a View that returns HTML in any format that you want.  You can also return JavaScript that runs when the HTML load in the browser. 

Why are you struggling to write code in the CreateOrder Action and craft a View?

Answer 5

User-79977429 posted

haned_1983, you did not share the actual code that we need to provide assistance.

No, This is my actual code. This code works correctly. I just handle submitted event to close modal form & do some actions.

Answer 6

User475983607 posted

hamed_1983

No, This is my actual code. This code works correctly. I just handle submitted event to close modal form & do some actions.

The modal form clearly posts to CreateOrder.

<form id="frmNewOrderItem" asp-action="CreateOrder" method="post">

This should cause a full page refresh and close the modal unless you wrote code to open the modal wen the page loads.  Or perhaps you wrote a submit handler that does an AJAX Post but for got to include the script.  Or perhaps validation is stopping the POST.

Answer 7

User-79977429 posted

Sorry, i've forgotten to send my action code.

Here is CreateOrder action code :

[HttpPost]
        [ValidateAntiForgeryToken]
        public async Task<IActionResult> CreateOrder([Bind("OrderId,PersonId,OrderNumber,OrderDate,Description")] Orders orders)
        {
            if (ModelState.IsValid)
            {
                _dbContext.Add(orders);
                await _dbContext.SaveChangesAsync();
                return RedirectToAction(nameof(Index));
            }

            ViewData["_orderID"] = _dbContext.Orders.Max(o => o.OrderId) + 1;
            ViewData["_personID"] = orders.PersonId;
            return PartialView("_NewOrderItemPartialView");
        }

And here is simple Index action code :

public IActionResult Index()
        {
            var persons = _dbContext.Persons.ToList();
            return View(persons);
        }

As i told, it works perfect, but i want to handle somethings (like close modal, refresh the page and ...) after form submitted.

Answer 8

User475983607 posted

The code is still incomplete and you are forcing the community to guess.  The CreatePost() Action returns partial HTML when there is a model state error.  Otherwise; CreateOrder() returns a full HTML response.  My best guess is you have an AJAX POST method that you have not shared.  The CreateOrder() Action is successful and the results are returned to the "unknown" AJAX POST function.  The AJAX function does nothing with response because you expect the page to refresh.    I'm pretty sure you need to fix the code.

Return the redirect URL in an HTML Response.

ViewData["redirectUrl"] = nameof(Index);
return PartialView();

    <div id="redirectAction">
        @Url.Action((string)ViewData["redirectAction"])
    </div>

Then write jQuery to get the URL and do a window.location to redirect the browser.

I'm not a fan of this design because overwriting HTML tends to be destructive to JavaScript handlers.