Render a partial view upon drop down click

Question

0.00/5 (No votes)

See more:

I have a drop down with certain values

C#

@using (Html.BeginForm())
{

@Html.DropDownList("Animal Type",
    new SelectList((System.Collections.IEnumerable) ViewData["Animal"], "animal_type"))

}

my controller action for that method is

SQL

[HttpGet]
        public ActionResult create()
        {
            var animal = from x in db.Animals
                         select x.animal_type;
            ViewData["Animal"] = animal;
            return View();
        }

After selecting a value from the drop down it should display the specific partial view on the same view. Any ideas

Posted 18-Aug-14 7:36am

ZainNabi

Add a Solution

Comments

Snesh Prajapati 19-Aug-14 5:08am

On Drop-down selection, what you are writing to display the selected value on partial view?

ZainNabi 19-Aug-14 7:34am

I have basically 3 values:

*Sheep
*Camel
*Ox

if I select Ox it must redirect to the Ox partial view and populate a read-only textbox with Ox
else if Camel selected it must redirect to the Ox partial view and populate a read-only textbox with Camel

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Snesh Prajapati · Answer 1 · 2014-08-19T07:05:00

You need to write code in your View something like:

@using (Html.BeginForm())
{
 
    @Html.DropDownList("Animal Type",
    new SelectList((System.Collections.IEnumerable)ViewData["Animal"], "animal_type")) 
}

<div id="animalForm">
</div>

<script>
    $("#Animal_Type").click(function () {

        var selectedAminal = $("#Animal_Type").val();
        alert(selectedAminal);
        $.ajax({

            url: "/Home/AnimalPartialView",
            data: { animalName: selectedAminal },
            type: 'Get',
            success: function (msg) {
                $("#animalForm").empty().append(msg);
            },
            error: function () {
                alert("something seems wrong");
            }
        });
    });

</script>

AnimalPartialView would be name of the action method. Now implement action method in Controller as shown below:

[HttpGet]
       public ActionResult AnimalPartialView(string animalName)
       {
           return PartialView("AnimalPartialView", animalName);
       }

Finally add a partial view named as AnimalPartialView. Write the below lines of code in AnimalPartialView partial view.

@model System.String
<span>@Model</span>

For more information on partial view visit below link.
CRUD Operations using Partial View and jQueryUI in ASP.NET MVC4 - Part 1[^]

Thanks.