0

So, I'm pretty familiar with web forms and how to build re-usable .ascx controls.

My contrived example that I'd like to solve in ASP.NET MVC:

My product sells stuff My product offers memberships to clients (Think of a health club where they have memberships that are purchased with a credit card as well as a retail shop where they take credit cards for payment for product).

I need to have a control where an existing client can pay for either type of product with any one of a list of saved credit cards or enter a new card.

Web forms - CreditCardEntryControl.ascx - When the "Complete Purchase" form on the .aspx page is submitted, I get the necessary information from the child control and do what I have to do.

How is this same sort of thing accomplished with Razor views?

So, I would have a model that contains "NameOnCard", "CreditCardNumber", "Cvv", "ExpMonth", "ExpYear". It would also have a nullable "SelectedStoredCreditCardId".

Then, on the parent "page" I would have information about what was being purchased (retail item or membership or whatever)...that's where the form would live that would get posted.

How do I get the "child" elements on the CreditCardEntry partial (or whatever) to be posted with the form so I can do what I have to do?

Doesn't seem like a new problem...I'm just hoping someone can point me at an elegant solution.

Thanks

1
  • 2
    Look at using PartialViews Commented May 22, 2014 at 21:02

2 Answers 2

2

For this, I'd use Razor editor templates.

Create a class (i.e. CreditCardInfo) that contains all the properties of your credit card form. Add a property of this type to viewmodels of your "parent" pages. In the view of the parent page you'd do something like:

@Html.EditorFor(model => model.CreditCardInfo)

This would ensure that all fields from your credit card info (sub)form would be created with proper names so they can be bound on submit in your controller.

You could achieve similar effect with a partial view, but you'd have difficulty binding the values if the credit card information needs to be part of the (larger) form from the parent page.

Sign up to request clarification or add additional context in comments.

4 Comments

This sounds closer to what I want to do. However, what if I want to do "custom stuff" like pre-load the expiration month and expiration year with values (all 12 month and last year, this year and 8 more years for the exp. year). Or, what if my "custom control" had a text box that I wanted to do a date picker for or something?
You can do all that in the editor template. Consider the editor template to be just another view which has CreditCardInfo type for its model. So, anything you can do in a view, you can do here. The difference is that Razor view engine will use your editor template to render any values of CreditCardInfo and embed that rendering into the main view.
"Editor Template"? How do you designate a "view" for the CreditCardInfo model class?
It's all done by convention. Razor rendering engine will look in some default folders for the a "view / editor template" with the same name as your type. So, if you name your editor template CreditCardInfo.cshtml and place it in Views/Shared/Editor Templates, it should be used to render values of that type when you put something like this in the main view: @Html.EditorFor(model => model.CrediCardInfo). There are other ways to specify template names, if you insist on different code organization.
1

you can do the same thing leveraging partial views. here is a get you started tutorial

hope it helps

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.