Home ASP.NET MVC5 Razor Refresh modal dialog
Reply: 2

ASP.NET MVC5 Razor Refresh modal dialog

Azizjan Hamidovich Ayupov
1#
Azizjan Hamidovich Ayupov Published in 2017-12-04 09:57:37Z

I'm tryin' to get actual time in modal dialog every time a user press the Order button.

<a class="btn btn-primary" data-toggle="modal" data-target="#OrderModal">@MEDONET.Language.Doctor.Texts.Order</a>

So every time he do this in the modal div OrderModal

<div id="OrderModal" class="modal fade" role="dialog">
    @Html.Action("CreateOrderForm", Model.CreateOrderVM)
</div>

Which calls to CreateOrderForm action

public ActionResult CreateOrderForm(CreateOrderVM createOrderVM)
    {
        createOrderVM.Minute = DateTime.Now.Minute.ToString().PadLeft(2, '0');
        return View("CreateOrderForm", createOrderVM);
    }

So that action is actually running every time and calls CreateOrderForm.cshtml file

@{
Layout = null;
}
@model MEDONET.Models.CreateOrderVM

<div class="modal-dialog modal-sm">
<!-- Modal content-->
<div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title text-center">Order To Line</h4>
    </div>
    <div class="modal-body">
        @using (Html.BeginForm("CreateOrder", "Doctors", FormMethod.Post))
        {
            @Html.AntiForgeryToken()
            @Html.HiddenFor(m => m.DoctorId)
            <div class="row text-center">
                <p>Date & Time</p>
                @Html.Label("Year")
                @Html.EditorFor(model => model.Year, new { htmlAttributes = new { @class = "form-control", @Value = DateTime.Now.Year } })<br />
                @Html.Label("Month")
                @Html.EditorFor(model => model.Month, new { htmlAttributes = new { @class = "form-control", @Value = DateTime.Now.Month } })<br />
                @Html.Label("Day")
                @Html.EditorFor(model => model.Day, new { htmlAttributes = new { @class = "form-control", @Value = DateTime.Now.Day } })<br />
                @Html.Label("Hour")
                @Html.EditorFor(model => model.Hour, new { htmlAttributes = new { @class = "form-control", @Value = DateTime.Now.Hour } })<br />
                @Html.Label("Minute")
                @Html.EditorFor(model => model.Minute, new { htmlAttributes = new { @class = "form-control" } })<br />
                @if (this.User.IsInRole("Registrator"))
                {
                    @Html.EditorFor(model => model.PhoneNumber, new { htmlAttributes = new { @class = "form-control" } })<br />
                }
                <button type="submit" class="btn btn-default">Submit</button>
            </div>
        }
    </div>
    <div class="modal-footer">

    </div>
</div>

BUT! The popup fields are still filled with the first time given while parent page loading.

How can I give a user new time every time he press the Order button?

Vipin Kumar
2#
Vipin Kumar Reply to 2017-12-04 10:08:56Z

Razor code is executed only once, when page loads first time. After that, each time you toggle the modal popup, it just show/hide the same HTML. The solution would be to update the HTML, once you click the button to open the Modal. You can use JQuery's load() method to achieve this.

First you need to use JavaScript to toggle the Modal instead of HTML. Modify your button like below

<a class="btn btn-primary" id="openModal">@MEDONET.Language.Doctor.Texts.Order</a>

In JavaScript, add the event handler for this button like below

$('#openModal').on('click', function() {
  ...
})

Then, load the content of child action.

$('#openModal').on('click', function() {
  $("#OrderModal").load("@Url.Action("CreateOrderForm", "ControllerName")", function() {
    $('#OrderModal').modal('show')
  });
})

I haven't tested above code, and it may need few typo correction. Let me know, if it doesn't work.

Srulik
3#
Srulik Reply to 2017-12-04 10:20:54Z

I'm guessing that the method use some kind of post and than returns the new form. In this cases it happens that when you return the same view the model state is the one that populate those fields. In order to solve it add in the action

ModelState.Clear();

Or

ModelState.Remove("myChangeValue");

you can look for more info in https://blogs.msdn.microsoft.com/simonince/2010/05/05/asp-net-mvcs-html-helpers-render-the-wrong-value/

If you just want to change the time in the modal I would recommend to change it with javascript when you show the modal.

$('#OrderModal #Minute').val(new Data().getMinutes());
You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.394695 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO