使用Ajax渲染MVC视图

Question

                <div class="grid--cell fl1 lh-lg">
                    <div class="grid--cell fl1 lh-lg">
                        It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and   cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened,   <a href="/help/reopen-questions">visit the help center</a>.

                    </div>
                </div>
            </div>
            <div class="grid--cell mb0 mt8">Closed <span title="2013-01-18 16:42:40Z" class="relativetime">7 years ago</span>.</div>
        </div>
    </aside>

The task I am trying to accomplish basically involves me using AJAX to call an MVC view, and render the content of the view into my main content div. I understand that as I won't be doing a full page reload, just a refresh on the content I need, I will need to be altering the URL string to account for whichever controller and action I am attempting to call, to get the required view. I havent done a lot of Ajax as of yet, as I am only a junior developer, however I am very interested in learning how to achieve things such as this, and anything that follows.

I am using C# as my primary language, and can use either mvc3 or mvc4, whether or not that makes much difference, I am not sure.

</div>

Answer 1

Button: @supplierQuoteId is from the model via Razor.

<a id="@supplierQuoteId" class="t-button" style="float: right; margin: 3px; padding: 2px; line-height: 0;" 
    onclick="ajaxEditSupplierQuote(this.id)">
    <span class="t-icon t-edit">Edit</span>
</a>  

JavaScript: If $.ajax is complete, I open a Telerik Window and there is a .Content - div with the id="supplierquote-dialog-contet" which is then filled with the returned PartialView from the Controller, otherwise, i set .html(" ") . Empty.

<script type="text/javascript">        
    function ajaxEditSupplierQuote(id) {
        var strUrl = "/SupplierQuote/Edit" + "/" + id.toString();
        $.ajax({
            type: "GET",
            url: strUrl,
            dataType: "html",
            success: function (data) {
                if (!data) {
                    $('#supplierquote-dialog-content').html(" "); // error check
                }
                else {
                    $('#supplierquote-dialog-content').html(data);
                }
            },
            complete: function () {
                var window = $("#SupplierQuoteDialog").data("tWindow");
                window.center().open();
            }
        });
    }
</script>

SupplierQuoteController:

    [HttpGet]
    public ActionResult Edit(Guid id)
    {
        SupplierQuoteEntity supplierQuote = _supplierQuoteRepository.GetById(id);
        return PartialView("Edit", supplierQuote);
    }