Skip to main content

Bind DropDownList in Asp.MVC using Range/Fixed value

In most of the application we are using dropdown to select some value from predefined list of value. Some of them are getting bind from the database table, some of are getting bind using Enum value while some of them are getting bind using some fix value like 1 to 10, or month drop-down 1 to 12. In this article post we will see how to bind drop-down using range value in MVC.

Below if the sample code which will bind 2000 to 2014 in year drop-down.

@using System.Web.Mvc
    ViewBag.Title = "Home Page";

    Enumerable.Range(2000, 15).
    Select(i => new
        Text = i.ToString(),
        Value = i.ToString()
    }),new { style="width:300px;"})

above code will produce output as below image.

In the above code we have just write a code in view only, there is no server side code. Now in some cases we need to bind some data which are not in particular range like “2000, 2002, 2004, 2006, 2008” or some string type fixed data then we can not use “Enumerable.Range”, so how can we bind those kind of data. See the below example to bind fixed data to dropdown control using MVC.

@using System.Web.Mvc
	ViewBag.Title = "Home Page";

<br /><br />
	new SelectList(
		2000, 2002, 2004, 2006, 2008,
		2010, 2012, 2015, 2018, 2022,
		2023, 2034, 2035, 2036, 2041, }),
	new { style = "width:300px;" })

above code will produce output as below image.

In this article we have seen two options to bind dropdown using Range and fixed value, In our next article we will see how to bind a dropdown with ViewBag object.

How to install and configure NopCommerce application?

How to install and configure NopCommerce shopping cart application.

First you need to go to website. On the home page you can find a link to “Download for Free”, see the below Figure 1 for the reference.

Figure 1

Now click on the download for free button and it will lead you to the page. On the download page you can see various option to download as displayed in the below Figure 2


Figure 2

Here we need to download source code (highlighted option) which is around 115 MB of the code. It is a full working source code. Now if you go to download folder once it is completed you will see a zip file for source code. In this article we will use NopCommerce version 3.80
If you extract .rar file the you will get the visual studio solution for NopCommerce along with some other folders. This NopCommerce solution contains See the below Figure 3 for reference.

Figure 3
Now click on NopCommerce.sln file which will open the solution in Visual Studio. Here I am using Visual Studio 2015 Community Edition, Check you version compatibility with NopCommerce 3.80

Once solution file is open then all the projects are loaded into solution explorer as below Figure 4

Figure 4

Understanding NopCommerce Source code Architecture

Figure 4 shows the architecture of NopCommerce project, there are main 4 folders Libraries, Plugins, Presentation and Tests.
Lets see 1 by 1 folder first of all there is a “Tests” folder which contains 5 different project for test cases. Here we do not need it so we will not explore it here.
Second folder is the main folder “presentation” it has 3 different project 1 (Nop.Web) is for E-commerce store for the clients, 2(Nop.Admin) is for store admin (owner) and last 3 “Nop.Web.Framework” it has some common feature which will be used for above both project.
Third is Plugins folder, in this folder there some built in plugins they have provided. We will explore this feature in detail in our next article “How to write NopCommerce plugins”.

Now 4th folder is for “Libraries” which has 3 projects and that is for core features, data models and services. Those are also not in the scope of this article.

Now lets install NopCommerce on our local system by running the project. Please press F5 on the keyboard and you will see the screen like below Figure 5.

Figure 5

Now in the input box marked with number 1, is for store admin email address, you need to enter here you valid email address so it will be used later if you forgot your password and etc. In the input box marked with number 2 and number 3, enter password both password must be the same, and please create a complex password which is never easy to guess. Now select the check box labeled with “Create Sample Data” marked with number 4 if you wish to create sample data also, else leave it blank.

For number 5 it is a database setting, if you wish to use built in data storage (SQL Server Compact edition) the select a radio button labeled with “Use build-in data storage(SQL Server Compact)” or if you have already installed an SQL server or SQL express then choose the radio button marked with number 5.

If you have not created a blank data base in SQL server or SQL express then check the check box marked with number 6 (Create database if it doesn’t exist).

In the input marked with number 7 and 8 you need to enter SQL server name and database name respectively if you wish to use setting “Enter SQL Connection Value” option else you can enter sql raw connection string by selecting “Enter raw connection string (advanced). For authentication you can use either SQL server authentication by entering SQL server user name and password into input box labeled with 9 and 10 or you can use integrated windows authentication. Now finally click on the install button at the bottom right of the page marked with 11 and you are done. In the browser you can see the store is running with sample items.

NopCommerce is installed successfully.

How to integrate SagePay payment form using Asp.Net MVC


In Europe Sage Pay is independent payment service provider. It is one of the most trusted payment brands in Europe. Sage Pay makes payments safe and secure. Payment security and fraud prevention are two of their top priorities.

Sagepay provides various integration option for your e-commerce website. Like

1. Form Integration
2. Server Integration
3. Server Iframe integration
4. Direct Integration

In Direct integration, only your server will be save card data and host checkout page, while in all other 3 integration it will be save card data to the SagePay server and checkout pages will be there only. You do not need to create checkout page for that.

Today we are going to understand how Form Integration will work.

Setting in Web.Config

Let’s first list out the data we need to get started.

1. SagePay VendorName
2. Call back URL with IPAddress
3. Encrypted Password

Now let’s have a look at web.config file.
In web.config file go to configuration section add the below code at the first node. We are going to add a new section as a “SagePayConfiguration” later in this file.

<section name="SagePayConfiguration" type="SagePayConfiguration" />

now in the configuration section at the last add a below code block

 <!-- Set to TEST for the Test Server and LIVE for the live environment-->
 <add key="sagepay.api.env" value="TEST" />
 <add key="sagepay.api.enableClientValidation" value="true" />
 <add key="sagepay.api.connectionString" value="" />
 <add key="sagepay.api.messageLoggerName" value="com.sagepay" />
 <add key="sagepay.api.messageLoggerLevel" value="debug" />

 <add key="sagepay.api.protocolVersion" value="3.00" />
 <add key="sagepay.kit.vendorName" value="*******" />
 <add key="sagepay.kit.fullUrl" value="" />
 <add key="sagepay.kit.currency" value="GBP" />

 <!--If you leave this value blank the kit will use the current host name-->
 <add key="sagepay.kit.siteFqdn.LIVE" value="" />
 <add key="sagepay.kit.siteFqdn.TEST" value="" />

 <add key="sagepay.kit.defaultTransactionType" value="PAYMENT" />

 <!--0 = If AVS/CV2 enabled then check them. If rules apply, use rules (default). 1 = Force AVS/CV2 checks even if not enabled for the account. If rules apply, use rules. 2 = Force NO AVS/CV2 checks even if enabled on account. 3 = Force AVS/CV2 checks even if not enabled for the account but DON'T apply any rules.-->
 <add key="sagepay.kit.applyAvsCv2" value="2" />

 <!--0 = If 3D-Secure checks are possible and rules allow, perform the checks and apply the authorisation rules. (default) 1 = Force 3D-Secure checks for this transaction if possible and apply rules for authorisation. 2 = Do not perform 3D-Secure checks for this transaction and always authorise. 3 = Force 3D-Secure checks for this transaction if possible but ALWAYS obtain an auth code, irrespective of rule base.-->
 <add key="sagepay.kit.apply3dSecure" value="2" />

 <!--Optional property. (Server & Form protocols only) For charities registered for Gift Aid, set to 1 to display the Gift Aid check box on the payment pages, or else 0-->
 <add key="sagepay.kit.allowGiftAid" value="1" />

 <!-- Optional setting. if you are a vendor that has a merchant category code of 6012, then you can fill in extra details required for authorisation for Visa transactions -->
 <add key="sagepay.kit.collectRecipientDetails" value="false"/>

 <!-- Set this to true to use colon delimited format for the basket instead of XML -->
 <!-- Note: The 'Trips' details on the 'Extra Information' page will not be displayed if this flag is set to true. -->
 <add key="sagepay.kit.basketxml.disable" value="false" />

 <!--Optional setting. Set to tell the Sage Pay System which merchant account to use. If omitted, the system will use E, then M, then C by default E = Use the e-commerce merchant account (default) M = Use the mail order/telephone order account (if present) C = Use the continuous authority merchant account (if present)-->
 <add key="sagepay.kit.accountType" value="" />

 <!--Optional setting. If you are a Sage Pay Partner and wish to flag transactions with your unique partner id it should be set here-->
 <add key="sagepay.kit.partnerID" value=""/>

 <!--Use this key to send surcharge xml and override the default values set for your account. See the protocol documents for further explanation on using the surcharge xml-->
 <add key="sagepay.kit.surchargeXML" value="&lt;surcharges&gt;&lt;surcharge&gt;&lt;paymentType&gt;VISA&lt;/paymentType&gt;&lt;percentage&gt;2.50&lt;/percentage&gt;&lt;/surcharge&gt;&lt;/surcharges&gt;" />

 <!--FORM Protocol Only Settings Set this value to the Encryption password assigned to you by Sage Pay -->
 <add key="sagepay.kit.form.encryptionPassword.TEST" value="**********" />
 <add key="sagepay.kit.form.encryptionPassword.LIVE" value="" />

 <!-- 0 = Do not send either customer or vendor e-mails, 1 = Send customer and vendor e-mails if address(es) are provided(DEFAULT). 2 = Send Vendor Email but not Customer Email. If you do not supply this field, 1 is assumed and e-mails are sent if addresses are provided.-->
 <add key="sagepay.kit.form.sendEmail" value="1" />

 <!--Optional setting. Set this to the mail address which will receive order confirmations and failures-->
 <add key="sagepay.kit.form.vendorEmail" value="" />

 <!--Optional setting. Contents of email message. You can specify any custom message to send to your customers in their confirmation e-mail here The field can contain HTML if you wish, and be different for each order. This field is optional-->
 <add key="sagepay.kit.form.emailMessage" value="Thanks for your order" />

 <!--The Sage Pay server URLs to which customers will be sent for payment for each environment-->
 <add key="sagepay.api.formPaymentUrl.LIVE" value="" />
 <add key="sagepay.api.serverPaymentUrl.LIVE" value="" />
 <add key="sagepay.api.serverTokenRegisterUrl.LIVE" value="" />
 <add key="sagepay.api.directPaymentUrl.LIVE" value="" />
 <add key="sagepay.api.directTokenRegisterUrl.LIVE" value="" />
 <add key="sagepay.api.direct3dSecureUrl.LIVE" value="" />
 <add key="sagepay.api.directPayPalCompleteUrl.LIVE" value="" />
 <add key="sagepay.api.tokenRemoveUrl.LIVE" value="" />
 <add key="sagepay.api.abortUrl.LIVE" value="" />
 <add key="sagepay.api.authoriseUrl.LIVE" value="" />
 <add key="sagepay.api.cancelUrl.LIVE" value="" />
 <add key="sagepay.api.refundUrl.LIVE" value="" />
 <add key="sagepay.api.releaseUrl.LIVE" value="" />
 <add key="sagepay.api.repeatUrl.LIVE" value="" />
 <add key="sagepay.api.voidUrl.LIVE" value="" />

 <add key="sagepay.api.formPaymentUrl.TEST" value="" />
 <add key="sagepay.api.serverPaymentUrl.TEST" value="" />
 <add key="sagepay.api.serverTokenRegisterUrl.TEST" value="" />
 <add key="sagepay.api.directPaymentUrl.TEST" value="" />
 <add key="sagepay.api.directTokenRegisterUrl.TEST" value="" />
 <add key="sagepay.api.direct3dSecureUrl.TEST" value="" />
 <add key="sagepay.api.directPayPalCompleteUrl.TEST" value="" />
 <add key="sagepay.api.tokenRemoveUrl.TEST" value="" />
 <add key="sagepay.api.abortUrl.TEST" value="" />
 <add key="sagepay.api.authoriseUrl.TEST" value="" />
 <add key="sagepay.api.cancelUrl.TEST" value="" />
 <add key="sagepay.api.refundUrl.TEST" value="" />
 <add key="sagepay.api.releaseUrl.TEST" value="" />
 <add key="sagepay.api.repeatUrl.TEST" value="" />
 <add key="sagepay.api.voidUrl.TEST" value="" />

User Detail Form

Now lets have look at the form, it can be as per your requirement, Here for the demo purpose I have create a simple form with 1 fix product for 1 GBP, but you can change it as per your need.

see the below image for the reference how my form is looks and what are the information I am collecting from the user.

Sample Form

In the above form we have asked for FirstName, lastname, billing address, post code, phone number, city, country etc. If you billing address and city address it different then you can ask differently. Now once you click on the submit button it will display same data for the confirmation. Once you click on the submit button again it will redirect you to the Sagepay website for the Checkout with the data you provided in basket.

See the below image for the reference

here on the left side you can see order description and vendor name with how much about you need to pay. While on the right side you need to select “How do you want to pay?” mean using which type of card you want to make payment, it’s visa, visa debit etc.

Once you select the appropriate card to make the payment it will redirect you to the page where it will ask for the card credential, like Name on the card, credit card number, card expire month/year and card CVV number.

See the below image for the reference

Now once you have entered the card detail then click on the “Confirm card detail” button so it will redirect you to review order page where you can review all the detail regarding this order, like order detail, card detail, shipping/billing address etc.

for the reference see the below image

Now once you click on the pay now button it will process your request and make the payment from the card, once it is done successfully then it will redirect request to the address which you have set in “sagepay.kit.siteFqdn.TEST” key in the web.config and “request.SuccessUrl” in the controller, if request is failed then it will redirect to the address which you have set in “sagepay.kit.siteFqdn.TEST” key in the web.config and “request.FailureUrl” in the controller

Once it comes to your call back page again it will have a response in a Crypt variable, then we need to convert it to “IFormPaymentResult” type object so we can read the response, Now how our response looks like see the below image

Sample Response

If you are getting the ResponseStatus.OK that means your transaction is successfully completed.
In this article we have see how to setup a form integration payment method for SagePay. Here with I have attached a fully working MVC sample project just download it and in web.config file change below keys with you vendor name.
1. sagepay.api.env – this key may contains TEST or LIVE value, based on your requirement you can set it.
2. sagepay.kit.vendorName – this is the vendor name for you account created on SagePay site.
3. sagepay.kit.siteFqdn.TEST – If in 1. key you set TEST then set callback URL here, just root address of your site else leave it blank
4. sagepay.kit.siteFqdn.LIVE – If in 1. key you set LIVE then set callback URL here, just root address of your site else leave it blank
5. sagepay.kit.form.encryptionPassword.TEST – If in 1. key you set TEST then set encrypted password for your vendor name here, just root address of your site else leave it blank
6. sagepay.kit.form.encryptionPassword.LIVE – If in 1. key you set LIVE then set encrypted password for your vendor name here, just root address of your site else leave it blank

I hope it will be helpful someone who wants to integrate SagePay form.

If you want to download working example then download it from here

Good Luck 🙂