Question

i have the following ajax.actionlink :-

<div id ="link">
@Ajax.ActionLink("Add New Answer", "Create", "Answer",
        new { questionid = Model.QuestionID },
          new AjaxOptions
          {

              HttpMethod = "Get",
              UpdateTargetId = "link",
              InsertionMode = InsertionMode.InsertAfter,
              LoadingElementId = "progress"

                        })
                        </div>

where the above link will retrun the following _answer partial view which contains an Ajax.Actionlink:-

 @using (Ajax.BeginForm("Create", "Answer", new AjaxOptions
{
    HttpMethod = "Post",
    InsertionMode = InsertionMode.InsertAfter,
    UpdateTargetId = "incrementanswer",
}))

 {
     <div id = "returnedquestion">
     @Html.ValidationSummary(true)

    <fieldset> 
        <legend>Answer here</legend> 
        <div class="editor-label"> 
            @Html.LabelFor(model => model.Description) 
        </div> 
        <div class="editor-field"> 
            @Html.EditorFor(model => model.Description) 
            @Html.ValidationMessageFor(model => model.Description) 
        </div> 
        <div class="editor-label"> 
            @Html.LabelFor(model => model.IsRight) 
        </div> 
        <div class="editor-field"> 
             @Html.DropDownList("IsRight", String.Empty) 
            @Html.ValidationMessageFor(model => model.IsRight) 
        </div>  
    </fieldset> 
     <input type= "hidden" name = "questionid" value = @ViewBag.questionid>
     <input type= "hidden" name = "assessmentid" value = @ViewBag.assessmentid>
     <input type="submit" value="Add answer" />
 </div>
 }
 </div>

currently after clicking on the submit button the “UpdateTargetId = “incrementanswer”, will be updated with the result of the submition, but the problem is that i also need to remove the current _answer partial view (currently the view containing the values i have inserted will still be displayed after clicking on the submit ajax.beginform)

Answer 1

load your partial view inside a wrapper div

<div id="partialWrapper">
 @Html.partial("yourpartial")
</div>

declare an OnSuccess event handler

@using (Ajax.BeginForm("Create", "Answer", new AjaxOptions
{
    HttpMethod = "Post",
    InsertionMode = InsertionMode.InsertAfter,
    UpdateTargetId = "incrementanswer",
    OnSuccess="removePartial"
}))

define the removePartial

<script>
 function removePartial(){
   $("#partialWrapper").remove();
  }
</script>