CODEWITHSUNDEEP
asp.net-mvc
Greg Gum
Greg Gum

Reputation: 37909

How to update Partial View without full replacement

I have this partial view. This works, ie, when the user clicks the button, an ajax trip is made to the server, and it updates the partial view and it comes down and replaces the current div with the updated Div and shows the Promo Message.

However, it seems there should be a better way to do this. In other words, is it necessary to replace the entire partial view? Isn't there a way to send just the data up to the server, and then update just the message when it gets back, like maybe via a JSON call?

Controller:

public ActionResult ApplyPromoCode(OrderViewModel orderViewModel) {
        orderViewModel.PromoMessage = "Promo has been applied";
        return PartialView("PromoPartial", orderViewModel);
    }

Partial View:

    @model NTC.PropertySearch.Models.OrderViewModel
    @using (Ajax.BeginForm("ApplyPromoCode", "OrderSummary", new AjaxOptions { InsertionMode =     InsertionMode.Replace, UpdateTargetId = "promo" }))
    {
        <div id="promo">
        <table>
        <td>
            @Html.LabelFor(m => m.PromoCode)
        </td>

        <td>
            @Html.TextBoxFor(m => m.PromoCode)
        </td>

        <td>
            @Html.ValidationMessageFor(m => m.PromoCode)
        </td>
            <td>
                <input type="submit" value="Apply Promo Code" />
            </td>
            <td>
                @Html.DisplayFor(m=> m.PromoMessage)
            </td>
    </table>
</div>
}

Upvotes: 0

Views: 754

Answers (2)

Imran
Imran

Reputation: 504

you can do this to

Controller 

public ActionResult ApplyPromoCode(OrderViewModel orderViewModel) {
        //your processing code
        return Content("Promo has been applied");
    }

View

 @model NTC.PropertySearch.Models.OrderViewModel
    @using (Ajax.BeginForm("ApplyPromoCode", "OrderSummary", new AjaxOptions {  UpdateTargetId = "pcode" }))
    {
        <div id="promo">
        <table>
        <td>
            @Html.LabelFor(m => m.PromoCode)
        </td>

        <td>
            @Html.TextBoxFor(m => m.PromoCode)
        </td>

        <td>
            @Html.ValidationMessageFor(m => m.PromoCode)
        </td>
            <td>
                <input type="submit" value="Apply Promo Code" />
            </td>
            <td>
                <div id="pcode"></div>
            </td>
    </table>
</div>
}

Upvotes: 2

user1987392
user1987392

Reputation: 3991

Instead of returning a PartialView you can always return a JSON object/array or some XML and use jQuery/JavaScript on your callback function to update the values of your input fields.

Here's an example of some code I use to return JSON from a Controller:

public ActionResult CurrentTags(int entityID)
{
        Entity entity = db.Entity.Find(entityID);
        var tags = from tag in entity.Tag
                   select new
                   {
                       id = tag.Name,
                       text = tag.Name
                   };
        return this.Json(tags, JsonRequestBehavior.AllowGet);
}

Upvotes: 0

Related Questions