CODEWITHSUNDEEP
c#htmlasp.net-mvcmodel-view-controller
silhouette hustler
silhouette hustler

Reputation: 1763

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

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)

Upvotes: 0

Views: 303

Answers (2)

K D
K D

Reputation: 5989

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>

Upvotes: 2

Behran Kankul
Behran Kankul

Reputation: 68

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

Upvotes: 0

Related Questions