Cara Menganti Partialview Pada Asp Net Mvc

Adakalanya mengganti page pada tampilan browser tidak perlu dengan mengarahkan ke controller lain, cukup dengan mengganti element <div> pada PartialView yang satu dengan PartialView lainnya. Yang sudah anda tahu bahwa proses running dari sebuah ASP NET pertama-tama dari User menuju Controller baru menuju cshtml (PartialView) dan url yang ditampilkan pada browser merupakan penamaan pada Controller bukan penamaan pada cshtml.

Oleh karena itu jika anda ingin menambahkan sebuah tampilan baru itu berarti harus menambah controller baru. Berbeda dengan apa yang akan dibahas pada artikel ini, dimana kita akan mencoba banyak tampilan PartialView hanya dengan satu Controller dan satu URL saja.

Pertama Kita buat sebuah PartialView Utama kita namakan saja ViewUtama.cshtml. dan jangan lupa memberikan id pada <div> misalkan id=”ViewUtama”.

<div id="ViewUtama" class="container" style="width:100%;">

 

</div>

Kedua, buat 2 PartialView View1.cshtml dan View2.cshtml

View1.cshtml

@{
    ViewBag.Title = "View1";
}

<h2>View1</h2>
<div id="View1" class="container" style="width:100%;">
  <div class="row">
        <p> AGUNGPANDUAN.COM AGUNGPANDUAN.COM AGUNGPANDUAN.COM AGUNGPANDUAN.COM AGUNGPANDUAN.COM
            AGUNGPANDUAN.COM AGUNGPANDUAN.COM AGUNGPANDUAN.COM AGUNGPANDUAN.COM AGUNGPANDUAN.COM
            AGUNGPANDUAN.COM AGUNGPANDUAN.COM AGUNGPANDUAN.COM AGUNGPANDUAN.COM AGUNGPANDUAN.COM
            AGUNGPANDUAN.COM AGUNGPANDUAN.COM AGUNGPANDUAN.COM AGUNGPANDUAN.COM AGUNGPANDUAN.COM
            AGUNGPANDUAN.COM AGUNGPANDUAN.COM AGUNGPANDUAN.COM AGUNGPANDUAN.COM AGUNGPANDUAN.COM
            AGUNGPANDUAN.COM AGUNGPANDUAN.COM AGUNGPANDUAN.COM AGUNGPANDUAN.COM AGUNGPANDUAN.COM
            AGUNGPANDUAN.COM AGUNGPANDUAN.COM AGUNGPANDUAN.COM AGUNGPANDUAN.COM AGUNGPANDUAN.COM
            AGUNGPANDUAN.COM AGUNGPANDUAN.COM AGUNGPANDUAN.COM AGUNGPANDUAN.COM AGUNGPANDUAN.COM
        </p>
        <label class="control-label" style="text-align:left">View 1 TEST</label>
        <input type="text" id="txtSearchProductCd" class="form-control" style="width:100%" />
  </div>
</div>

View2.cshtml

@{
    ViewBag.Title = "View2";
}

<h2>View2</h2>
<div id="View1" class="container" style="width:100%;">
  <div class="row">
        <p> EPANDU.COM EPANDU.COM EPANDU.COM EPANDU.COM EPANDU.COM EPANDU.COM EPANDU.COM
            EPANDU.COM EPANDU.COM EPANDU.COM EPANDU.COM EPANDU.COM EPANDU.COM EPANDU.COM
            EPANDU.COM EPANDU.COM EPANDU.COM EPANDU.COM EPANDU.COM EPANDU.COM EPANDU.COM
            EPANDU.COM EPANDU.COM EPANDU.COM EPANDU.COM EPANDU.COM EPANDU.COM EPANDU.COM
            EPANDU.COM EPANDU.COM EPANDU.COM EPANDU.COM EPANDU.COM EPANDU.COM EPANDU.COM
            EPANDU.COM EPANDU.COM EPANDU.COM EPANDU.COM EPANDU.COM EPANDU.COM EPANDU.COM
            EPANDU.COM EPANDU.COM EPANDU.COM EPANDU.COM EPANDU.COM EPANDU.COM EPANDU.COM
        </p>
        <label class="control-label" style="text-align:left">View 2 TEST</label>
        <input type="text" id="txtSearchProductCd" class="form-control" style="width:100%" />
  </div>
</div>

Ketiga, Buat 2 Method pada controller yang bertugas mengarahkan ke PartialView yaitu GetPartialViewAction1 dan GetPartialViewAction2.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace ReplacePartialViewOneController.Controllers
{
    public class ReplacePartialViewController : Controller
    {
        //
        // GET: /ReplacePartialView/

        public ActionResult Index()
        {
            return View();
        }

        public ActionResult GetPartialViewAction1()
        {
            return PartialView("View1");
        }

        public ActionResult GetPartialViewAction2()
        {
            return PartialView("View2");
        }


    }
}

Keempat, Buat script Ajax yang menjalankan 2 Method pada controller.

<script type="text/javascript">
    $(document.body).on('change', "#cmbSearch", function (e) {
        if ($("#cmbSearch option:selected").val() == "View1") {
            $.ajax({
                url: "@Url.Content("~/ReplacePartialView/GetPartialViewAction1")",
             }).done(function (data) {
                 $("#ViewUtama").html(data);
             });
        }
        else {
            $.ajax({
                url: "@Url.Content("~/ReplacePartialView/GetPartialViewAction2")",
             }).done(function (data) {
                 $("#ViewUtama").html(data);
             });
        }
    });
</script>

Untuk lebih lengkapnya anda dapat download filenya pada link di bawah ini,