How to update a view on value entered before posting the form MVC/C#

Question

I have a simple view with start and end date, what i am trying to achieve is to show a "Half Day" checkbox if the start date is equal to the end date.

This is what i have tried so far but it's not refreshing the view, since it will get refreshed only on the page load, so i am not able to check if the start date is equal to the end date. What is the best way to show and hide the checkbox?

 @Html.FormEditorFor(x => x.StartDate)
    @Html.FormEditorFor(x => x.EndDate)
    if (Model.StartDate == Model.EndDate)
     {
         @Html.FormEditorFor(x => x.IsHalfDay, inputClass: "col-sm-1")
     }
    @Html.FormDropdownFor(x => x.HalfDayAP, ampmDropdown, inputClass: "col-sm-1")
    @Html.FormEditorFor(x => x.ReasonForLeave)

It will only check on the page load, if startdate = enddate then show Half Day checkbox. When you enter some value you have to call a function using jquery/javascript to show/hide Half Day — Senjuti Mahapatra, Apr 22 '16 at 07:21
@Alorika I know it will check only on the page load, that was the reason for asking this question. The question is how to show/hide Half Day? — threesixnine, Apr 22 '16 at 07:24
You can use javascript or jQuery to handle this scenario. As mvc doesn't work like ASP.net you will not get a server side hit on entering dates. try to use jQuery with onchange event of both date fields. and do the operation accordingly. let me know if you need an example of it — K D, Apr 22 '16 at 07:48
@KD If you would post an example, that would be helpful, if it does work i could mark it as a correct answer and other people could see it. — threesixnine, Apr 22 '16 at 07:52

score 2 · Accepted Answer · answered Apr 22 '16 at 08:15

as you requested, using jQuery this can be done in following way.

Step 1: include jQuery library in your project

<script type="text/javascript" src="<jQuery version you include in your project>.js">

Step 2: change your html as following:

    @Html.FormEditorFor(x => x.StartDate)
    @Html.FormEditorFor(x => x.EndDate)
    <span id="IsHalfDay" style="display:@(Model.StartDate == Model.EndDate ? "block" : "none")">
     @Html.FormEditorFor(x => x.IsHalfDay, inputClass: "col-sm-1")
    </span>

    @Html.FormDropdownFor(x => x.HalfDayAP, ampmDropdown, inputClass: "col-sm-1")
    @Html.FormEditorFor(x => x.ReasonForLeave)

Step 3: write following script block on your view

<script type="text/javascript">
$(function(){

       $("input[name=StartDate],input[name=EndDate]").change(function(){
            if($("input[name=StartDate]").val() == $("input[name=StartDate]").val())
            {
                $("#IsHalfDay").show();
            }
            else
            {
                $("#IsHalfDay").hide();
                $("input[name=IsHalfDay]").removeAttr("checked");
            }
       });
 });
</script>

score 0 · Answer 2 · edited May 23 '17 at 12:16

0

you can use javascript instead of trying to refresh partial view.

there is a good js lib for you can use. Very simple Check it out: http://momentjs.com/docs/#/displaying/difference/

There is also another answer for you. Updating PartialView mvc 4

edited May 23 '17 at 12:16

Community

1
1

answered Apr 22 '16 at 07:30

Behran Kankul

68
4

How to update a view on value entered before posting the form MVC/C#

2 Answers2