Send data from a partial view to a MVC controller

Question

I want it to be rendered a partial view corresponding to the value of select option.

Index.html

@{
ViewBag.Title = "Index";
 }

 <h2>Contato</h2>

<form class="form-horizontal">
<fieldset>
    <h4>Selecione a natureza do seu contato</h4>
    <div class="form-group">
        <div class="col-lg-10">
            <select class="form-control" id="selectContact">
                <option value="" disabled selected>Selecione sua opção</option>
                <option value="Registro">Solicitação de Registro</option>
                <option value="Erro">Reporte de erros</option>
                <option value="Outros">Outros</option>
            </select>
        </div>
    </div>
</fieldset>
<div id="contactPartialDiv" style="display:none;">

</div>
</form>

_HTML error.

@using (Html.BeginForm("Erro", "Contact", FormMethod.Post))
{
<fieldset>
    <legend>Formulario de reporte de erros</legend>
    <span class="text-danger">Lamentamos que tenha encontrado problemas utilizando nosso portal, por favor, descreva-o aqui.</span>
    <br/>
    <div class="form-group">
        <label for="inputUsername" class="col-lg-2 control-label">Nome de usuário</label>
        <div class="col-lg-10">
            <input type="text" class="form-control" id="inputUsername" placeholder="Nome de usuário">
        </div>
    </div>
    <div class="form-group">
        <label for="inputEmail" class="col-lg-2 control-label">Email</label>
        <div class="col-lg-10">
            <input type="text" class="form-control" id="inputEmail" placeholder="Email">
        </div>
    </div>
    <div class="form-group">
        <label for="inputEmail" class="col-lg-2 control-label">Área do erro</label>
        <div class="col-lg-10">
            <input type="text" class="form-control" id="inputErro" placeholder="Área do erro">
        </div>
    </div>
    <div class="form-group">
        <label for="textAreaMsg" class="col-lg-2 control-label">Mensagem</label>
        <div class="col-lg-10">
            <textarea class="form-control" rows="3" id="textAreaMsg" placeholder="Descreva o erro aqui..."></textarea>
        </div>
    </div>
    <div class="form-group">
        <div class="col-lg-6">
            <input type="submit" id="submit"/>
        </div>
    </div>
</fieldset>
}

Controller

// GET: Contact
    [HttpGet]
    public ActionResult Index()
    {
        return View();
    }


    public ActionResult Redirect(string page)
    {
        switch (page)
        {
            case "Registro":
                return RedirectToAction("Registro");
            case "Erro":
                return RedirectToAction("Erro");
            case "Outros":
                return RedirectToAction("Outros");
            default:
                return View("Error");
        }
    }

    public ActionResult Erro()
    {
        return PartialView("_Erro");
    }

    [HttpPost]
    public ActionResult Erro(FormCollection collection)
    {
        if (!ModelState.IsValid)
        {
            return PartialView("_Erro");
        }

        var message = new IdentityMessage
        {
            Subject = "Reporte de Erro",
            Destination = "[email protected]"
        };
        return null;
    }

Jquery

$(document).ready(function() {
$("#selectContact").change(function () {
    $("#contactPartialDiv").fadeOut("fast").delay(200);


    var $selectedId = $(this).val();



    $.get(`/Contact/Redirect?page=${$selectedId}`,
        function(data) {
            $("#contactPartialDiv").html(data);
            $("#contactPartialDiv").fadeIn("fast");
        });
  });
});

Only when I click the button Submit, he returns to index and neither calls the method post.

Answer 1

To solve this just take out of your index a Tag Form, this will solve your problem.