javascript - modeldata有效后运行javascript代码

Question

我正在开发一个 Facebook 应用程序，我有一个用户填写的表单，提交后，我想通过 facebook canvas 付款向他们收费。当然，这意味着 modeldata 需要首先有效，但我总是觉得 mvc 代码只有在 javascript 代码调用它之后才运行。我如何在下面的 mvc 方法中调用这个 javascript 命令？

function buy() {
        var obj = {
            method: 'pay',
            action: 'purchaseitem',
            product: 'https://mywebsite.net/product.html'
        };

        FB.ui(obj, function(data) {
            console.log(data);
        });
    }

    **document.getElementById('submitbtn').onclick = function() {buy()};** // trying to only call this after model data is valid
};

[HttpPost]
    public ActionResult Contact(Project.Models.Order c)
    {
        decimal price = 0;

        if (ModelState.IsValid)
        {
            try
            {
                // call javascript code here to open the window
            }
            catch (Exception)
            {
                return View("Error");
            }
        }
        return View("Index");
    }

public async Task<ActionResult> Index(FacebookContext context)
    {
        if (ModelState.IsValid)
        {
            //var user = await context.Client.GetCurrentUserAsync<MyAppUser>();
            //var client = new FacebookClient(context.AccessToken);
            //dynamic me = client.Get("me");
            //string name = me.Name;
            loadDropDownLists();
            return View();
        }

        return View("Error");
    }

索引 View

@using HomeworkHelpers.Models
@using Microsoft.AspNet.Facebook.Models
@model HomeworkHelpers.Models.Order
@{
ViewBag.Title = "Home Page";
}

@section PageScripts{
<script type="text/javascript">
    $(document).ready(function () {
        $('#documentTypeList').change(function () {
            var modelData = {
                documentType: $('#documentTypeList').val(),
                urgency: $('#urgencyList').val(),
                numberOfPages: $('#numberOfPagesList').val()
            };

            $.ajax({
                type: "GET",
                data: modelData,
                url: "/Home/getNewPrice",
                async: true,
                success: function (data) {
                    $('#priceLabel').html(data.currentPrice);
                    $('#UnFormattedPrice').val(data.unformattedCurrectPrice);
                }
            });
        });

        $('#numberOfPagesList').change(function () {
            var modelData = {
                documentType: $("#documentTypeList").val(),
                urgency: $("#urgencyList").val(),
                numberOfPages: $("#numberOfPagesList").val()
            };
            $.ajax({
                type: "GET",
                data: modelData,
                url: "/Home/getNewPrice",
                async: true,
                success: function (data) {
                    $('#priceLabel').html(data.currentPrice);
                    $('#UnFormattedPrice').val(data.unformattedCurrectPrice);
                }
            });
        });

        $('#urgencyList').change(function () {
            var modelData = {
                documentType: $("#documentTypeList").val(),
                urgency: $("#urgencyList").val(),
                numberOfPages: $("#numberOfPagesList").val()
            };
            $.ajax({
                type: "GET",
                data: modelData,
                url: "/Home/getNewPrice",
                async: true,
                success: function (data) {
                    $('#priceLabel').html(data.currentPrice);
                    $('#UnFormattedPrice').val(data.unformattedCurrectPrice);
                }
            });
        });

        $('.spacing').click(function () {
            var select = $("#numberOfPagesList");
            select.empty().append($('<option></option>').val('').text('--Select--'));
            var url = '@Url.Action("NumberOfPagesList", "Home")';
            $.getJSON(url, { id: $(this).val() }, function (data) {
                $.each(data, function (i, item) {
                    select.append($('<option></option').val(item.Value).text(item.Name));
                });
            });
        });

    $('#currencyList').change(function () {
        $.ajax({
            type: "GET",
            url: "/Home/changeCurrency?newCurrency=" + this.value,
            async: true,
            success: function (result) {
                $('#priceLabel').html(result.currentPrice);
            }
        });
    });
    });
</script>

@if (Model.Buy)
{
<script>
    $(document).ready(function () {
        buy();
    });
</script>
}
}

@using (Html.BeginForm("Contact", "Home", FormMethod.Post))
{
    @Html.ValidationSummary(true)

<div class="row">
    @Html.LabelFor(model => model.Name, "Name:")
    @Html.EditorFor(model => model.Name)
    @Html.ValidationMessageFor(model => model.Name)
</div>
<div class="row">
    @Html.LabelFor(model => model.Email, "Email:")
    @Html.EditorFor(model => model.Email, new { id = "email" })
    @Html.ValidationMessageFor(model => model.Email)
</div>
<div class="row">
    @Html.LabelFor(model => model.PhoneNumber, "Phone Number:")
    @Html.EditorFor(model => model.PhoneNumber, new { id = "phoneNumber" })
    @Html.ValidationMessageFor(model => model.PhoneNumber)
</div>
<div class="row">
    @Html.LabelFor(model => model.Topic, "Topic:")
    @Html.EditorFor(model => model.Topic)
    @Html.ValidationMessageFor(model => model.Topic)
</div>
<div class="row">
    @Html.LabelFor(model => model.Subject, "Subject:")
    @Html.DropDownListFor(model => model.Subject, (SelectList)ViewBag.subject, "--Select--", new { id = "subjectList" })
    @Html.ValidationMessageFor(model => model.Subject)
</div>
<div class="row">
    @Html.LabelFor(model => model.Style, "Style:")
    @Html.DropDownListFor(model => model.Style, (SelectList)ViewBag.paperStyle, "--Select--", new { id = "paperStyleList" })
    @Html.ValidationMessageFor(model => model.Style)
</div>
<div class="row">
    @Html.LabelFor(model => model.DocumentType, "Document Type:")
    @Html.DropDownListFor(model => model.DocumentType, (SelectList)ViewBag.documentType, "--Select--", new { id = "documentTypeList" })
    @Html.ValidationMessageFor(model => model.DocumentType)
</div>
<div class="row">
    @Html.LabelFor(model => model.AcademicLevel, "Academic Level:")
    @Html.DropDownListFor(model => model.AcademicLevel, (SelectList)ViewBag.academicLevel, "--Select--", new { id = "academicLevelList" })
    @Html.ValidationMessageFor(model => model.AcademicLevel)
</div>
<div class="row">
    @Html.LabelFor(model => model.NumberOfPages, "Number of Pages/Words:")
    @Html.DropDownListFor(model => model.NumberOfPages, (SelectList)ViewBag.numberOfPages, "--Select--", new { id = "numberOfPagesList" })
    @Html.ValidationMessageFor(model => model.NumberOfPages)
</div>
<div class="row">
    @Html.LabelFor(model => model.NumberOfSources, "Number of Sources:")
    @Html.DropDownListFor(model => model.NumberOfSources, (SelectList)ViewBag.numberOfSources, "--Select--", new { id = "numberOfSourcesList" })
    @Html.ValidationMessageFor(model => model.NumberOfSources)
</div>
<div class="row">
    @Html.LabelFor(model => model.Urgency, "Urgency:")
    @Html.DropDownListFor(model => model.Urgency, (SelectList)ViewBag.urgency, "--Select--", new { id = "urgencyList" })
    @Html.ValidationMessageFor(model => model.Urgency)
</div>
<div class="row">
    @Html.LabelFor(model => model.Spacing, "Spacing:")
    @Html.RadioButtonFor(m => m.Spacing, "Double", new { @class = "spacing", id = "double", @Checked = "checked" }) Double
    @Html.RadioButtonFor(m => m.Spacing, "Single", new { @class = "spacing", id = "single" }) Single
    @Html.ValidationMessageFor(model => model.Spacing)
</div>
<div class="row">
    @Html.LabelFor(model => model.Requirements, "Requirements:")
    @Html.TextAreaFor(model => model.Requirements)
    @Html.ValidationMessageFor(model => model.Requirements)
</div>
<div class="row">
    @Html.DropDownListFor(model => model.Currency, (SelectList)ViewBag.currency, null, new { id = "currencyList" })
    <h2 id="priceLabel">
        @Html.DisplayFor(model => model.Price)
    </h2>
    @Html.HiddenFor(model => model.UnFormattedPrice)
    <input type="submit" value="Submit" />
    <input type="reset" value="Reset" />
</div>
}

型号

namespace HomeworkHelpers.Models
{
public class Order
{
    public int ID { get; set; }

    [Required(ErrorMessage = "Name is required")]
    public string Name { get; set; }

    [EmailAddress(ErrorMessage = "A Valid Email Address is Required.")]
    [Required(ErrorMessage = "Email Address is Required.")]
    public string Email { get; set; }

    [Phone(ErrorMessage = "A Valid Phone Number is Required.")]
    [Required(ErrorMessage = "Phone Number is Required.")]
    public string PhoneNumber { get; set; }

    [Required(ErrorMessage = "Subject is Required.")]
    public string Subject { get; set; }

    [Required(ErrorMessage = "Topic is Required.")]
    public string Topic { get; set; }

    [Required(ErrorMessage = "Document Type is Required.")]
    public string DocumentType { get; set; }

    [Required(ErrorMessage = "Urgency is Required.")]
    public string Urgency { get; set; }

    [Required(ErrorMessage = "Number of Pages is Required.")]
    public Int16 NumberOfPages { get; set; }

    [Required(ErrorMessage = "Requirements are Required.")]
    [DataType(DataType.MultilineText)]
    [StringLength(200)]
    public string Requirements { get; set; }

    [Required(ErrorMessage = "Writing Style is Required.")]
    public string Style { get; set; }

    [Required(ErrorMessage = "Spacing is Required.")]
    public string Spacing { get; set; }

    [Required(ErrorMessage = "Academic Level is Required.")]
    public string AcademicLevel { get; set; }

    [Required(ErrorMessage = "Number of Sources is Required.")]
    public Int16 NumberOfSources { get; set; }

    [Required(ErrorMessage = "Price is Required.")]
    [Range(0.01, 10000.00, ErrorMessage = "Your quote is not complete because you haven't completed all of the steps.")]
    [DataType(DataType.Currency)]
    [DisplayFormat(DataFormatString = "{0:C}")]
    public decimal Price { get; set; }

    public string UnFormattedPrice { get; set; }

    [Required(ErrorMessage = "Currency is Required.")]
    public string Currency { get; set; }

    public string PaymentID { get; set; }
    public string PayerID { get; set; }

    // current properties
    public bool Buy { get; set; }
}

public class OrderDBContext : DbContext
{
    public DbSet<Order> Orders { get; set; }
}

}

Answer 1

在模型验证成功时将 ViewBag.Buy 属性值设置为 true 并返回 View :

[HttpPost]
public ActionResult Contact(Project.Models.Order c)
{
    decimal price = 0;

    if (ModelState.IsValid)
    {
        try
        {
            ViewBag.Buy = true;
            return View("Index",  c)
        }
        catch (Exception)
        {
            return View("Error");
        }
    }
    return View("Index");
}

在索引页末尾添加此 Java 脚本代码:

@if (ViewBag.Buy != null && ViewBag.Buy == true)
{
    <script>
        $(document).ready(function () {
            buy();
        });
    </script>
}