How to use ajax in razor to not reload a popup

Question

I'm using a form in popup with razor which has to send data to controller and receive back the response from the controller. Actually I'm working with a simple form but the problem is when I submit the data by clicking on button the popup disappear and I have to reopen the pop to get the data sent by the controller . So I want to use Ajax in order to not reload the popup The code of Ajax could be something like this but this one doesn't work

@using (Ajax.BeginForm("Index", "Home", new AjaxOptions() { UpdateTargetId = "popupConvertTxt" })) 

The code of the actual form is

@using (Html.BeginForm("Index", "Home", FormMethod.Post)) 
     {
        <img width="60" height="60" alt="" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAY............" />
        <input type="hidden" name="imageFile" value="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAY.........."/>
        @Html.TextArea("resultText")
        <input type="submit" style="margin-left:40px;cursor:pointer;" id="l" value="Envoyer"/>
    }

Answer 1

You have to include following js libraries

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>

View example

<div id="result"></div>

@using (Ajax.BeginForm("Index", "Home", new AjaxOptions { UpdateTargetId = "result" }))
{
    @Html.TextArea("resultText")
    <input type="submit" value="OK" />
}