Partial View Render

Question

I am new to the world of MVC programming with C #, I already read the topic, made some examples and of course with the guide of StackOverflow I think I'm doing well.

However I find myself with an exercise that I want to perform and from which I have seen several answers but none has worked for me, and I come to you asking for the support.

Index

  @{
    ViewBag.Title = "Bienvenido";
}
<div class="container-fluid">
    <div class="row">
        <div class="col-md-3" id="menu">
            <ul class="nav nav-pills nav-stacked">
                <li role="presentation" class="active"><a href="#">Inicio</a></li>
                <li role="presentation"><a href="#">Datos Generales</a></li>
                <li role="presentation"><a href="#">Datos Curriculares</a></li>
                <li role="presentation"><a href="#">Experiencia Laboral</a></li>
                <li role="presentation"><a href="#">Datos Laborales</a></li>
                <li role="presentation"><a href="javascript:void(0)" id="dependientes">Cónyuge y Dependientes</a></li>
                <li role="presentation"><a href="#">Inmuebles</a></li>
                <li role="presentation"><a href="#">Vehículos</a></li>
                <li role="presentation"><a href="#">Muebles</a></li>
                <li role="presentation"><a href="#">Inversiones</a></li>
                <li role="presentation"><a href="#">Adeudos</a></li>
                <li role="presentation"><a href="#">Posible Conflicto de Intereses</a></li>
                <li role="presentation"><a href="#">Observaciones</a></li>
            </ul>
        </div>
        <div class="col-md-9">
            <div class="row" id="opciones">

            </div>
            <div class="row" id="crear">

            </div>
            <div class="row" id="registros">

            </div>
        </div>
    </div>
</div>


<script type="text/javascript">
    $(function () {
        $('#dependientes').click(function () {
            $.get('@Url.Action("Create","Dependientes")', function (data) {
                $('#crear').replaceWith(data);
            });
        });
    });
     $(function () {
        $('#dependientes').click(function () {
            $.get('@Url.Action("Mostrar","Dependientes")', function (data) {
                $('#registros').replaceWith(data);
            });
        });
    });
</script>

Partial View _Mostrar

@model List<projectD.Models.dependiente>

@{
    ViewBag.Title = "_Mostrar";
}
<br />
<div class="container">
    <div class="row">
        @foreach (var item in Model)
        {
            <div class="card" style="width: 20rem; display:inline-block; margin-top:10px">
                <img class="card-img-top" src="~/Content/images/familia.png" alt="Card image cap" width="50" height="50">
                <div class="card-block">
                    <h4 class="card-title">Dependiente</h4>
                    <p class="card-text">
                        @item.nombre
                        <br />
                        @item.apellidoPaterno
                        <br />
                        @item.apellidoMaterno
                        <br />
                        @item.CURP
                    </p>
                    @Html.ActionLink("Detalle", "Details", new { id = item.idDependiente }, new {@class= "btn btn-primary"})
                </div>
            </div>
        }
    </div>
</div>

I have a project with a main view, which has a menu to the left when selecting each option to the right render two partial views each with its controller the first to add records and the second to display them. main screen

What I want to do is that when I click on add record, only the partial views are updated and the URL is not reloaded since I would lose the menu option in which I am.

I hope you can support me

You'll need to use AJAX if you want a partial update _without_ page navigation (page reload). — Jasen, Aug 01 '17 at 18:08
Here is an [AJAX example](https://stackoverflow.com/questions/19392212/how-to-use-jquery-or-ajax-to-update-razor-partial-view-in-c-asp-net-for-a-mvc-p). — Jasen, Aug 01 '17 at 18:20
What is the exact nature of your issue. You've already got some AJAX going on, so what's not working? What problems are you running into? — Chris Pratt, Aug 01 '17 at 18:46
My issue is to know if I am fine-tuning the Ajax function since doing the examples does not work the way I want it. Have a view with three div on the left with a menu and the right with a create view and another to display. Adding a record to the create refreshes the entire page. Does the Ajax code go inside the main view or the create page? Thank yo — Omar Alejandro Rodriguez Marqu, Aug 06 '17 at 17:26

Partial View Render

0 Answers0