.NET MVC Ajax Form - How do you hide it?

Well, everything "functionally" works with what I'm trying to accomplish, and again, I'm sure this is something stupid, but I can't figure out how to do it.

I have an editing form for a person, say, a car. This "car" can have 0 - many passengers. Therefore, in my edit form, I have all the fields for the car, and then a list showing each passenger (partial). I also have a “add new passenger” button that will make a new partial view that will allow you to enter the passenger. It has a cancel link and an add button to submit an Ajax form. When you add a passenger, the passenger is automatically added to the list, but I need the passenger entry form to go away. I tried using the onSuccess and onComplete functions to hide the div in which the form is located, but both display only partial view HTML elements (white screen, text) and not partialView in the context of the entire page.

Sources: 1) Main view of editing

    <script type="text/javascript">
    Function hideForm(){
        document.getElementById('newPassenger').style.display = 'none';
    }

</script>
<h2>Edit</h2>

<%-- The following line works around an ASP.NET compiler warning --%>
<%= ""%>

<%Html.RenderPartial("EditCar", Model)%>
<h2>Passengers for this car</h2>
<%=Ajax.ActionLink("Add New Passenger", "AddPassenger", New With {.ID = Model.carID}, New AjaxOptions With {.UpdateTargetId = "newPassenger", .InsertionMode = InsertionMode.Replace})%>
<div id="newPassenger"></div>
<div id="passengerList">
    <%Html.RenderPartial("passengerList", Model.Passengers)%>
</div>
<div>
    <%= Html.ActionLink("Back to List", "Index") %>
</div>

2) View AddPassenger. The cancellation link below is an action that returns nothing, thus deleting the information in the div.

<%  Using Ajax.BeginForm("AddPassengerToCar", New With {.id = ViewData("carID")}, New AjaxOptions With {.OnSuccess = "hideForm()", .UpdateTargetId = "passengerList", .InsertionMode = InsertionMode.Replace})%>   
    <%=Html.DropDownList("Passengers")%> 
    <input type="submit" value="Add" />
    <%=Ajax.ActionLink("Cancel", "CancelAddControl", _
                                            New AjaxOptions With {.UpdateTargetId = "newPassenger", .InsertionMode = InsertionMode.Replace})%><% end using %>
+3
source share
2 answers

Okay - figured it out, I suppose it was too late last night. So, here is the answer, in fact it turned out to be a few small questions, the culmination of which is one.

  • The hideForm () function in javascript should be the hideForm () function, without capitals. Too often used to record controller functions.
  • I used "hideForm ()" in the OnSuccess attribute, not "hideForm" - doh.
  • , div, , div . hideForm, innerHTML div '.

, , .

+2

, MicrosoftAjax.js MicrosoftMvcAjax.js . ( , ) script, ajax . FireBug, .

, OnSuccess:

<% Using Ajax.BeginForm("AddPassengerToCar", 
    New With { .id = ViewData("carID")}, 
    New AjaxOptions With {
        .UpdateTargetId = "passengerList", 
        .InsertionMode = InsertionMode.Replace,
        .OnSuccess = "hideForm"
}) %>

javascript hideForm , AJAX div.

+1

Source: https://habr.com/ru/post/1738829/


All Articles